Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how pure CSS makes all kinds of web page icons". In daily operation, I believe many people have doubts about how pure CSS makes all kinds of web page icons. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "pure CSS how to make all kinds of web page icons". Next, please follow the editor to study!

Triangle

.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;}

Parallelogram icon

.box {width: 50px; height: 50px; margin: 100px auto; background-color: red; transform: skew (- 25deg);}

Pause button

.box {width: 50px; height: 50px; margin: 100px auto; color: # 000; border: 1px solid; border-radius: 50%; outline: 10px solid; outline-offset:-26px;}

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

In fact, if the value of outline-offset is set a little lower, one will come out.

Plus sign

.box {width: 50px; height: 50px; margin: 100px auto; color: # 000; border: 1px solid; border-radius: 50%; outline: 10px solid; outline-offset:-35px;}

If you rotate it again, it becomes a close button.

Close button

.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);}

Hamburger button

.box {width: 50px; height: 0px; margin: 100px auto; box-shadow: 36px 10px 0 3px red, 36px 00 3px red, 36px 20px 0 3px red;}

Hamburger button 2:

.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;}

Radio button

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

.box {width: 30px; height: 30px; margin: 100px auto; background-color: # 000; border-radius: 50%; box-shadow: 000 5px # fff,0 00 10px # 000;}

There is a cross in the circle

.box {width: 30px; height: 30px; margin: 100px auto; background-color: # 000; border-radius: 50%; box-shadow: 000 5px # fff, 000 10px # 000; outline: 36px solid # fff; outline-offset:-50px;}

Field icon

.box {width: 0; margin: 100px auto; border: 3px solid red; outline: 6px dotted red; outline-offset: 6px;}

Download Arrow

Use border to make triangles and box-shadow to make squares, mainly using offset

.box {width: 0; margin: 100px auto; color: red; border: 8px solid transparent; border-top: 8px solid red; box-shadow: 0-12px 0-4px;}

Bookmark

The principle to achieve this effect is to set the triangle to the background color, so that the hollow triangle appears.

.box {width: 0; height: 8px; background-color:orange; border: 8px solid transparent; border-bottom: 8px solid # fff;}

Two semicircle icons

This is relatively simple, which is achieved through the gradient function, and then a fillet border.

.box {width: 50px; height: 50px; border-radius: 50%; background-image: linear-gradient (to right,#ccc 50% 50px);}

Disable icon

The outer circle uses a fillet border, the vertical bar inside is made with a gradient, and then you can use the rotation attribute.

.box {width: 50px; height: 50px; border-radius: 50%; border:2px solid # 000; background: linear-gradient (to right,#fff 45% rotate (40deg) 55%); transform: rotate (40deg);}

Left and right arrow icon

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

.box {width: 0; height: 0; margin: 100px auto; border: 10px solid transparent; border-left: 10px solid red;-webkit-box-reflect: left 5px; box-reflect:left 5px;}

You need to open it in a Chrome browser because other browsers may not support it

Olecranon icon

Box {width: 32px; margin: 100px auto; border-top: 50px solid transparent; border-right: 22px solid # 096; border-bottom-right-radius: 100% politics;} at this point, the study on "how to make all kinds of web page icons in pure CSS" is over, hoping to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.