Pure CSS makes a variety of Web page icons (triangles, pause buttons, download arrows, plus signs, etc.)

Triangle

<div class= "box" ></div><style>
. box{

            width:0;            height:0;            border-top:50px solid transparent;            border-bottom:50px solid transparent;            border-left:50px solid transparent;            border-right:50px solid Red;}

</style>

Parallelogram icon

<div class= "box" ></div><style>. Box {            width: 50px;             height: 50px;             margin: 100px auto;             background-color: red;             Transform: skew ( -25deg);        } </style>

Pause button

 <div class= "box" ></div> <style>. Box  { width :  50px ; :  50px ;  margin :  100px auto ;  color :  #000 ;  border :  1px solid ;  Border-radius :  50% ;  outline :  10px solid ;         Outline-offset :  -26px ; } </style>  
 

The implementation principle of the pause button is the border with border, the square inside with outline. Because outline has an offset property that can be used to set offsets and is proportional.

In fact, if you set the value of the Outline-offset a little bit, a plus will come out.

Plus

<div class= "box" ></div><style>    . Box{        width: 50px;         Height: 50px;         margin: 100px auto;         color: #000;         Border: 1px solid;         Border-radius: 50%;         outline: 10px solid;         outline-offset: -35px;    } </style>

If you rotate it again, it becomes a close button

Close button

<div class= "box" ></div><style>. Box{width:50px;Height:50px;margin:100px Auto;Color:#000;Border:1px solid;Border-radius:50%;Outline:10px Solid;Outline-offset:-35px;Transform:Rotate (45deg); }

Burger button

<div class= "box" ></div><style>    . Box{        width: 50px;         Height: 0px;         margin: 100px auto;         box-shadow: 36px 10px 0 3px Red,        36px 0 0 3px Red,        36px 20px 0 3px red;    } </style>

Burger Button 2:

<div class= "box" ></div><style>    . Box{        width: 30px;         Height: 3px;         margin: 100px auto;         padding: 2px 0;         border-top: 3px solid red;         border-bottom: 3px solid red;         background-clip: content-box;         background-color: red;    } </style>

radio button

Because the Box-shadow scales proportionally, the first value is set to white, and then the second value is set to be larger than the first value.

<div class= "box" ></div><style>    . Box{        width: 30px;         Height: 30px;         margin: 100px auto;         background-color: #000;         Border-radius: 50%;         box-shadow: 0 0 0 5px #fff, 0 0 0 10px #000;    } </style>

With a cross in the circle

 <div class= "box" ></div><style>. Box  { width :  30px ; :  30px ;  margin :  100px auto ;  Background-color :  #000 ;  Border-radius :  50% ;  Box-shadow :  0 0 0 5px #fff, 0 0 0 10px #000 ;  outline :  36px solid #fff ;  Outline-offset :  -50px ; }</STYLE>  

Field-type icons

<div class= "box" ></div><style>     {        width: 0;         margin: 100px auto;         Border: 3px solid red;         outline: 6px dotted red;         outline-offset: 6px;    } </style>

Download arrows

Use border to make triangles, use Box-shadow to make squares, mainly offset

<div class= "box" ></div><style>     {        width: 0;         margin: 100px auto;         color: red;         Border: 8px solid Transparent;         border-top: 8px solid red;         box-shadow: 0-12px 0-4px;    } </style>

Bookmark

The principle of this effect is that the triangles are set to the background color so that the hollow triangles appear

<div class= "box" ></div><style>     {        width: 0;         height: 8px;         background-color:Orange;         Border: 8px solid Transparent;         border-bottom: 8px solid #fff;    } </style>

Two semicircle icons

This is relatively simple, is achieved by the gradient function, and then a rounded border

<div class= "box" ></div><style>     {       width: 50px;         height: 50px;         Border-radius: 50%;         background-image: linear-gradient (to right, #ccc 50%, #000 50%);    } </style>

Disable icon

The outer ring uses a rounded border, the vertical bar is made with a gradient, and then the rotation property can be

<div class= "box" ></div><style>     {       width: 50px;         height: 50px;         Border-radius: 50%;         Border:2px solid #000;         background: linear-gradient (to right, #fff  45%, #000 45%, #000 45%, #fff 55%);         Transform: rotate (40deg);    } </style>

Left and RIGHT arrow icons

Now that you can make a triangle, you can make two triangles.

<div class= "box" ></div><style>     {        width: 0;         height: 0;         margin: 100px auto;         Border: 10px solid Transparent;         border-left: 10px solid red;         -webkit-box-reflect: Left 5px;         box-reflect: Left5px;    } </style>

Need to open in Chrome browser because other browsers may not support

Eagle Mouth icon

<div class= "box" ></div><style>     {       width: 32px;         margin: 100px auto;         border-top: 50px solid Transparent;         border-right: 22px solid #096;         Border-bottom-right-radius: 100%; ;    } </style>

Pure CSS makes a variety of Web page icons (triangles, pause buttons, download arrows, plus signs, etc.)