Triangle and the CSS code with the Cancel button selected

1. Triangles:

1. In the traditional way:

. Triangle {  background:Blue Transparent transparent  transparent;   Border-width:100px 60px 0 60px;   border-style:;   height:; width:0;      }   <div class= "triangle" >    </div>

2. Using SVG:

. Svg-triangle {    margin:0 Auto; width:10px; height:100px;} . Svg-triangle Polygon {    fill:blue; stroke:yellow; stroke-width:2px;}   <svg xmlns= "Http://www.w3.org/2000/svg" version= "1.1" class= "Svg-triangle" >        <polygon points= "0,0 100,0 50,100" ></polygon>    </svg>

2. Select the Cancel button on the mobile side:

. Mui-switch{width:52px;Height:31px;position:relative;Border:1px solid #dfdfdf;Background-color:#fdfdfd;Box-shadow:#dfdfdf 0 0 0 0 inset;Border-radius:20px;Border-top-left-radius:20px;Border-top-right-radius:20px;Border-bottom-left-radius:20px;Border-bottom-right-radius:20px;Background-clip:Content-box;Display:Inline-block;-webkit-appearance:None;User-select:None;Outline:None; }. Mui-switch:before{content:"';width:29px;Height:29px;position:Absolute;Top:0px; Left:0;Border-radius:20px;Border-top-left-radius:20px;Border-top-right-radius:20px;Border-bottom-left-radius:20px;Border-bottom-right-radius:20px;Background-color:#fff;Box-shadow:0 1px 3px rgba (0, 0, 0, 0.4); }. mui-switch:checked{Border-color:#64bd63;Box-shadow:#64bd63 0 0 0 16px inset;Background-color:#64bd63; }. Mui-switch:checked:before{ Left:21px; }. Mui-switch.mui-switch-anim{transition:border cubic-bezier (0, 0, 0, 1) 0.4s, Box-shadow cubic-bezier (0, 0, 0, 1) 0.4s; }. Mui-switch.mui-switch-anim:before{transition:Left 0.3s; }. mui-switch.mui-switch-anim:checked{Box-shadow:#64bd63 0 0 0 16px inset;Background-color:#64bd63;transition:border Ease 0.4s, Box-shadow ease 0.4s, Background-color ease 1.2s; }. Mui-switch.mui-switch-anim:checked:before{transition:Left 0.3s; }

<label>
<input class= "Mui-switch mui-switch-anim" type= "checkbox" >
</label>

　　

　　

Triangle and the CSS code with the Cancel button selected