These simple-looking graphics are all implemented using pure CSS plus an HTML tag. Many of the implementations I've introduced before, or you know, but some believe you haven't seen them before.
1.Square
Real-time rendering works as follows:
Related CSS code:
#square {
width: 100px; height: 100px;
background: red;
}
2. Rectangles
Effect:
Related CSS code:
#rectangle {
width: 200px; height: 100px;
background: red;
}
web Front End Development Learning Q-q-u-n: 767273102 ，Share development tools, zero basics, advanced video tutorials, hope novices take less detours
3. Positive Circle
This is apparently done with rounded corners, as follows:
Related CSS code:
#circle {
width: 100px; height: 100px;
background: red;
border-radius: 50%
}
4. Ellipse
The results are as follows:
Comparing with a positive circle is a slightly different size, related CSS code:
#oval {
width: 200px; height: 100px;
background: red;
border-radius: 50%;
}
5. Upward Triangle
The results are as follows:
Related CSS code:
#triangle-up {
width: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
6. Downward Triangle
The results are as follows:
Related CSS code:
#triangle-down {
width: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}
7. Triangle facing left
The results are as follows:
Related CSS code:
#triangle-left {
width: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}
8. Triangle facing right
The results are as follows:
Related CSS code:
#triangle-right {
width: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}
Here I recommend my front-end learning communication button qun:731771211, which is full of learning front-end
9. Upper left triangle
The results are as follows:
Related CSS code:
#triangle-topleft {
width: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
A 45 degree oblique linear gradient can also be used, but the compatibility is not as good as border.
10. Upper Right Triangle
The results are as follows:
Related CSS code:
#triangle-topright {
width: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;
}
A 45 degree oblique linear gradient can also be used, but the compatibility is not as good as border.
11. Lower left triangle
The results are as follows:
Related CSS code:
#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}
Gradient drawing can also be used.
12. Lower right triangle
The results are as follows:
Related CSS code:
#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}
Gradient drawing can also be used.
13. Arc-tailed arrow
The results are as follows:
Complete CSS code:
#curvedarrow {
position: relative;
width: 0;
border-top: 90px solid transparent;
border-right: 90px solid red;
transform: rotate(10deg) translateX(100%);
}
#curvedarrow:after {
content: "";
position: absolute;
border: 0 solid transparent;
border-top: 30px solid red;
border-radius: 200px 0 0 0;
top: -120px; left: -90px;
width: 120px; height: 120px;
transform: rotate(45deg);
}
You don't need to use this large graphic in practice. Just reduce all the values in CSS (excluding rotation) by 10 times.
14. Trapezoid
The results are as follows:
Related CSS code:
#trapezoid {
border-bottom: 100px solid red;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
width: 100px;
}
Here I recommend my front-end learning communication button qun:731771211, which is full of learning front-end
15. Equilateral Quadrilateral
The rendering effect of the page is as follows:
The skew skew of the transform attribute can be used to diagonally implement:
#parallelogram {
width: 150px;
height: 100px;
transform: skew(20deg);
background: red;
}
16.Hexagonal Star
The results are as follows:
Related CSS code:
#star-six {
width: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position: relative;
}
#star-six:after {
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
position: absolute;
content: "";
top: 30px; left: -50px;
}
17.Pentagon
The results are as follows:
Pentagons are much more difficult to achieve than hexagons, and the CSS code is:
#star-five {
margin: 50px 0;
position: relative;
color: red;
width: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
transform: rotate(35deg);
}
#star-five:before {
border-bottom: 80px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
top: -45px; left: -65px;
content: '';
transform: rotate(-35deg);
}
#star-five:after {
position: absolute;
color: red;
top: 3px; left: -105px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
transform: rotate(-70deg);
content: '';
}
18. Polygon-Pentagon
The results are as follows:
Related CSS code:
#pentagon {
position: relative;
width: 54px;
box-sizing: content-box;
border-width: 50px 18px 0;
border-style: solid;
border-color: red transparent;
}
#pentagon:before {
content: "";
position: absolute;
top: -85px; left: -18px;
border-width: 0 45px 35px;
border-style: solid;
border-color: transparent transparent red;
}
Of course, the easiest way to understand this is to use clip-path
19. Polygon-Hexagon
The results are as follows:
Related CSS code:
#hexagon {
width: 100px; height: 55px;
background: red;
position: relative;
}
#hexagon:before {
content: "";
position: absolute;
top: -25px; left: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid red;
}
#hexagon:after {
content: "";
position: absolute;
bottom: -25px; left: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid red;
}
web Front End Development Learning Q-q-u-n: 767273102 ，Share development tools, zero basics, advanced video tutorials, hope novices take less detours 20. Polygon-Octagon
The results are as follows:
Related CSS code:
#octagon {
width: 100px;
height: 100px;
background: red;
position: relative;
}
#octagon:before {
content: "";
width: 100px;
position: absolute;
top: 0; left: 0;
border-bottom: 29px solid red;
border-left: 29px solid #fff;
border-right: 29px solid #fff;
box-sizing: border-box;
}
#octagon:after {
content: "";
width: 100px;
position: absolute;
bottom: 0; left: 0;
border-top: 29px solid red;
border-left: 29px solid #fff;
border-right: 29px solid #fff;
box-sizing: border-box;
}
21. Love
Affective effect after implementation:
Related CSS code:
#heart {
position: relative;
width: 100px; height: 90px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px; top: 0;
width: 50px; height: 80px;
background: red;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
#heart:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
//Here I recommend my front-end learning communication button qun:731771211, which is full of learning front-end
This effect was authored by Nicolas Gallagher.
22.Infinity
The results are as follows:
Related CSS code:
#infinity {
position: relative;
width: 212px; height: 100px;
box-sizing: content-box;
}
#infinity:before,
#infinity:after {
content: "";
box-sizing: content-box;
position: absolute;
top: 0; left: 0;
width: 60px; height: 60px;
border: 20px solid red;
border-radius: 50px 50px 0 50px;
transform: rotate(-45deg);
}
#infinity:after {
left: auto; right: 0;
border-radius: 50px 50px 50px 0;
transform: rotate(45deg);
}
23. Diamond Square
The results are as follows:
Related CSS code:
#diamond {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom-color: red;
position: relative;
top: -50px;
}
#diamond:after {
content: '';
position: absolute;
left: -50px;
top: 50px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: red;
}
24. Diamond shield
The results are as follows:
Related CSS code:
#diamond-shield {
width: 0;
border: 50px solid transparent;
border-bottom: 20px solid red;
position: relative;
top: -50px;
}
#diamond-shield:after {
content: '';
position: absolute;
left: -50px; top: 20px;
border: 50px solid transparent;
border-top: 70px solid red;
}
25. Square Diamond-Narrow
The results are as follows:
Related CSS code:
#diamond-narrow {
width: 0;
border: 50px solid transparent;
border-bottom: 70px solid red;
position: relative;
top: -50px;
}
#diamond-narrow:after {
content: '';
position: absolute;
left: -50px; top: 70px;
border: 50px solid transparent;
border-top: 70px solid red;
}
This effect was authored by Joseph Silber.
26. Cut diamonds - like diamonds
Learn this, when proposing, just write a few lines of CSS directly to your girlfriend, which can save a lot of money.
Valuable CSS codes:
#cut-diamond {
border-style: solid;
border-color: transparent transparent red transparent;
border-width: 0 25px 25px 25px;
width: 50px;
box-sizing: content-box;
position: relative;
margin: 20px 0 50px 0;
}
#cut-diamond:after {
content: "";
position: absolute;
top: 25px; left: -25px;
border-style: solid;
border-color: red transparent transparent transparent;
border-width: 70px 50px 0 50px;
}
27. Egg shape
Good results:
It's easy to implement, just a border-radius:
#egg {
display: block;
width: 126px;
height: 180px;
background-color: red;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
28. Pacman
The results are as follows:
Related CSS code:
#pacman {
width: 0px; height: 0px;
border-right: 60px solid transparent;
border-top: 60px solid red;
border-left: 60px solid red;
border-bottom: 60px solid red;
border-top-left-radius: 60px;
border-top-right-radius: 60px;
border-bottom-left-radius: 60px;
border-bottom-right-radius: 60px;
}
29. Speech bubbles with sharp corners
The results are as follows:
Related CSS code:
#talkbubble {
width: 120px; height: 80px;
background: red;
position: relative;
border-radius: 10px;
}
#talkbubble:before {
content: "";
position: absolute;
right: 100%; top: 26px;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}
30.12 stars
The results are as follows:
Related CSS code:
#burst-12 {
background: red;
width: 80px;
height: 80px;
position: relative;
text-align: center;
}
#burst-12:before,
#burst-12:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
background: red;
}
#burst-12:before {
transform: rotate(30deg);
}
#burst-12:after {
transform: rotate(60deg);
}
//Here I recommend my front-end learning communication button qun:731771211, which is full of learning front-end
The author of this effect is Alan Johnson.
31.Octagon
The results are as follows:
Related CSS code:
#burst-8 {
background: red;
width: 80px; height: 80px;
position: relative;
text-align: center;
transform: rotate(20deg);
}
#burst-8:before {
content: "";
position: absolute;
top: 0; left: 0;
height: 80px; width: 80px;
background: red;
transform: rotate(135deg);
}
32. Eight Diagrams of Yin and Yang
The results are as follows:
Related CSS code:
#yin-yang {
width: 96px; height: 48px;
background: #eee;
border-color: red;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}
#yin-yang:before {
content: "";
position: absolute;
top: 50%; left: 0;
background: #fff;
border: 18px solid red;
border-radius: 100%;
width: 12px; height: 12px;
}
#yin-yang:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: red;
border: 18px solid #eee;
border-radius: 100%;
width: 12px;
height: 12px;
}
33. Badge ribbon
The results are as follows:
Related CSS code:
#badge-ribbon {
position: relative;
background: red;
height: 100px; width: 100px;
border-radius: 50px;
}
#badge-ribbon::before,
#badge-ribbon::after {
content: '';
position: absolute;
border-bottom: 70px solid red;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
top: 70px; left: -10px;
transform: rotate(-140deg);
}
#badge-ribbon::after {
left: auto;
right: -10px;
transform: rotate(140deg);
}
34. Bilbili TV
The results are as follows:
Related CSS code:
#tv {
position: relative;
width: 200px; height: 150px;
margin: 20px 0;
background: red;
border-radius: 50% / 10%;
color: white;
text-align: center;
text-indent: .1em;
}
#tv:before {
content: '';
position: absolute;
top: 10%; bottom: 10%; right: -5%; left: -5%;
background: inherit;
border-radius: 5% / 50%;
}
35. V-shaped lines
The results are as follows:
Related CSS code:
#chevron {
position: relative;
text-align: center;
padding: 12px;
margin-bottom: 6px;
height: 60px; width: 200px;
}
#chevron:before {
content: '';
position: absolute;
top: 0; left: 0;
height: 100%; width: 51%;
background: red;
transform: skew(0deg, 6deg);
}
#chevron:after {
content: '';
position: absolute;
top: 0; right: 0;
height: 100%; width: 50%;
background: red;
transform: skew(0deg, -6deg);
}
//Here I recommend my front-end learning communication button qun:731771211, which is full of learning front-end
36. Magnifier
The results are as follows:
Related CSS code:
#magnifying-glass {
font-size: 10em;
display: inline-block;
width: 0.4em; height: 0.4em;
border: 0.1em solid red;
position: relative;
border-radius: 0.35em;
}
#magnifying-glass:before {
content: "";
display: inline-block;
position: absolute;
right: -0.25em; bottom: -0.1em;
border-width: 0;
background: red;
width: 0.35em; height: 0.08em;
transform: rotate(45deg);
}
//Here I recommend my front-end learning communication button qun:731771211, which is full of learning front-end
This implementation is very good. The unit is em, so it is very practical.
37. Curved moon
The moon bends over Kyushu:
Related CSS code:
#moon {
width: 80px; height: 80px;
border-radius: 50%;
box-shadow: 15px 15px 0 0 red;
}
38. Flags
The results are as follows:
Related CSS code:
#flag {
width: 110px; height: 56px;
padding-top: 15px;
position: relative;
background: red;
}
#flag:after {
content: "";
position: absolute;
left: 0; bottom: 0;
border-bottom: 13px solid #fff;
border-left: 55px solid transparent;
border-right: 55px solid transparent;
}
39. Cone
The results are as follows:
Still use the rounded border-radius attribute:
#cone {
width: 0; height: 0;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
border-top: 100px solid red;
border-radius: 50%;
}
40. Cross
The results are as follows:
It can be used as an add button or as an icon.
Related code:
#cross {
background: red;
width: 20px; height: 100px;
position: relative;
}
#cross:after {
background: red;
content: "";
width: 100px; height: 20px;
position: absolute;
left: -40px; top: 40px;
}
41. Baseball pedal shape
The results are as follows:
Related CSS code:
#base {
background: red;
display: inline-block;
height: 55px; width: 100px;
margin-left: 20px;
margin-top: 55px;
position: relative;
}
#base:before {
border-bottom: 35px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
content: "";
left: 0; top: -35px;
position: absolute;
}
42. Long pointing graphics
The results are as follows:
Related CSS code:
#pointer {
width: 200px; height: 40px;
position: relative;
background: red;
}
#pointer:after {
content: "";
position: absolute;
left: 0; bottom: 0;
border-left: 20px solid white;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
#pointer:before {
content: "";
position: absolute;
right: -20px; bottom: 0;
border-left: 20px solid red;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
//Here I recommend my front-end learning communication button qun:731771211, which is full of learning front-end
43.Lock
The results are as follows:
Related CSS code:
#lock {
font-size: 8px;
position: relative;
width: 18em; height: 13em;
border-radius: 2em;
top: 10em;
box-sizing: border-box;
border: 3.5em solid red;
border-right-width: 7.5em;
border-left-width: 7.5em;
margin: 0 0 6rem 0;
}
#lock:before {
content: "";
box-sizing: border-box;
position: absolute;
border: 2.5em solid red;
width: 14em; height: 12em;
left: 50%;
margin-left: -7em; top: -12em;
border-top-left-radius: 7em;
border-top-right-radius: 7em;
}
#lock:after {
content: "";
box-sizing: border-box;
position: absolute;
border: 1em solid red;
width: 5em; height: 8em;
border-radius: 2.5em;
left: 50%; top: -1em;
margin-left: -2.5em;
}
web Front End Development Learning Q-q-u-n: 767273102 ，Share development tools, zero basics, advanced video tutorials, hope novices take less detours
This is the collection of CSS drawing graphics.