30 cases teach you to use pure CSS to achieve common geometric shapes

This article introduces CSS rendering schemes for common geometric shapes with ideas taken from The Shapes of CSS and other articles online, with some modifications and additions as appropriate.

1. The triangle

traditionalborderimplementation

We know that if we set the width and height of a box to 0, the box will become a point. Give the top, bottom, left, and right borders a certain width and different colors, and a box filled solely with borders would look like this:

But when the content box is wide and tall, the four borders are not a point, but a rectangle (white area), and the border will look like a real border:

Therefore, to draw a triangle, the core is to set the width and height of the box to 0 and make the border appear as a triangle:

.delta {
    width: 0px;
    height: 0px;
    border: 50px solid;
    border-color:  #43cea2 #185a9d #ff6b6b #83a4d4;
}
Copy the code

Of course, we could give the box a width and height, but in this case we would set it to the IE box-sizing (box-sizing:border-box) model to ensure that the border is drawn into the box by increasing the width of the border, while still keeping the box size:

.delta {
    width: 100px;
    height: 100px;
    box-sizing: border-box;
    border: 50px solid;
    border-color:  #43cea2 #185a9d #ff6b6b #83a4d4;
}
Copy the code

The above two methods have the same effect, and then hide three triangles based on the actual situation. We only want to show the bottom triangle here, so the other triangles are hidden by transparent color, and the top triangle is border width 0 to avoid taking up space.

HTML:

<div class="delta"></div>
Copy the code

CSS:

.delta {
    width: 0px;
    height: 0px;
    border: 50px solid transparent;
    border-bottom-color: #ff6b6b;
    border-top-width: 0px;
}
Copy the code

The effect is as follows:

Source code: Codepen1

The gradient implementation

This method is suitable for drawing right triangles. If you want to draw a red right triangle, you can actually view it as half of a rectangle that fades from transparent to red:

div {
    width: 200px;
    height: 200px;
    background: linear-gradient(to right bottom,transparent 0%,transparent 50%,red 50%,red 100%);
}
Copy the code

SVG implementation

<svg width="100" height="100">
  <polygon points="50, 0, 100100, 0100" style="fill: red;"/>
</svg>
Copy the code

Clip – the path to achieve

div {
    width: 100px; 
    height: 100px;
    background: red;
    clip-path: polygon(50% 0.0 100%.100% 100%);
}
Copy the code

Transform and Overflow implementations

Suppose we want to draw this triangle:

First try to fill out his other half:

You can imagine that this is actually made up of two boxes stacked on top of each other, the green box below, the blue box above, the blue box tilted, and the part beyond the green box is hidden. So initially it might look something like this:

Suppose we could implement the pattern shown above, then try to hide the blue box beyond the green box, and make the green box transparent, wouldn’t we have achieved the original triangle?

In terms of layout, we consider that the green box is the parent element of relative positioning, and the blue box is the child element (pseudo-element is used to make it). Under the action of absolute positioning and transform, the effect in the figure is realized. Next we need to solve a few problems:

• How does the blue box relate to the green box in terms of width and height? As you can see, the side length of the blue box is roughly equal to the diagonal length of the green box. The green boxes are all 100px wide and high, so the diagonal lines are 100 square root of 2 px, which equals 140px, so the blue boxes have sides 140px, which is 140% of the width and height of their parent boxes.
• The absolute location of the blue boxleftWhat’s the offset? In the absolute positioning setting, we can have the blue box side by side to the left of the green box, with both bottom edges on the same line
• How many degrees does the blue box rotate? It is easy to see from the geometry of the diagram that after setting the absolute position above, the blue box should be rotated another 45 degrees to reach the position shown in the diagram. But notice here,The blue box does not rotate around its center, but around its lower right corner vertexSo I have to change it heretransform-originThe value of the

Finally, hide the part beyond the green box and set the color of the green box to transparent. So the final code looks like this:

div {
    width: 100px; 
    height: 100px;
    background: transparent;
    position: relative;
    overflow: hidden;
}
div::after {
    content: ' ';
    width: 140%;
    height: 140%;
    background-color: #185a9d;
    position: absolute;
    left: -140%;
    bottom: 0;
    transform-origin: right bottom;
    transform: rotate(45deg); }Copy the code

Source code: Codepen2

Character to realize

div::after {
    content:'\25b3'
    color:red
    font-size: 60px    
}
Copy the code

Basically not practical because you can’t set the background color and you can’t set the shape of the triangle.

Multiple rectangular stack implementation

HTML:

<div class="container">
  <div style="width: 1px"> width: 2px"> width: 3px"> width: 4px"> width: 5px"> width: 6px"></div>
</div>
Copy the code

CSS:

.container {
    display:flex;
    flex-direction: column;
    align-items: center;
    div {
    	height:1px;
        background: red; }}Copy the code

A triangle can be thought of as a series of rectangles of increasing width and extremely small height stacked on top of each other. This code draws something close to an equilateral triangle. To draw a right triangle, set align-items: start to draw the rectangle uniformly to the left.

This approach is also basically impractical, first of all, because it adds extra DOM structure, and second of all, because the graphics are jagged and not aesthetically pleasing. To reduce the jagged, we could try to compress the height of the rectangle further, but that would mean using more DOM to draw triangles of the same height.

2. The oval

Ordinary ellipse

Ellipse implementation relies on border-radius, so it is necessary to understand the specific meaning of border-radius.

Normally, to set the rounded corners of a div, we might write code like this:

border-radius: 12px
Copy the code

It is actually equivalent to the following code:

border-top-left-radius: 12px 12px
border-top-right-radius: 12px 12px
border-bottom-left-radius: 12px 12px
border-bottom-left-radius: 12px 12px
Copy the code

That is, if we set the top left, top right, bottom left, and bottom right values of div to 12px, what are those two values? They’re actually referring to the horizontal radius and the vertical radius of each of these four angles. In this example, our four rounded corners are actually 1/4 arcs of a circle with a radius of 12px.

So we can understand the formation of circles. For a 100px by 100px div, set border-radius:50%. This is equal to setting the horizontal radius of each corner of the div to half the width and the vertical radius to half the height of the div. This will make the shape a circle.

Similarly, for a 200px by 100px div, setting border-radius:50% equals setting the horizontal radius of the four corners to half the width of the div and the vertical radius to half the height of the div, so that the shape will be an oval.

The code is as follows:

div {
  width: 200px; 
  height: 100px;
  background: #185a9d;
  border-radius: 50%;
}
Copy the code

Special ellipse (egg-shaped)

The implementation is similar to ordinary ellipses. The feature is that the upper part is flatter than the lower part, so the vertical radius of the upper left and upper right corners is longer. Here, 60% of the total height is taken, and the remaining 40% is the vertical radius of the lower left and right corners. The code is as follows:

HTML:

<div class="shape"></div>
Copy the code

CSS:

.shape {
  width: 126px;
  height: 180px;
  background: #36d792;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
Copy the code

Source code: Codepen3

3. The fan

semicircle

• Border – the radius implementation:

  Draw a rectangle twice as long as it is wide. Then round the top left and right corners.

  .shape {
    width: 200px;
    height:100px;
    background: #ff6b6b;
    border-radius:100px 100px 0 0;
  }
  Copy the code

• Overflow: hidden implementation:

  Make half of the circle out of the parent element and give the parent element overflow hide

  .shape {
    width: 200px;
    height: 100px;  
    overflow: hidden;
    position: relative;
  }
  .shape::after {
    content:' ';
    position: absolute;
    width: 200px;
    height: 200px;
    background: #ff6b6b;
    border-radius: 50%;
  }
  Copy the code

• Background gradient implementation (looks like a semicircle) :

  You can think of a semicircle as a circle that goes from colored to transparent

  .shape {
    width: 200px;
    height:200px;
    border-radius: 50%;
    background-image: linear-gradient(to bottom,#ff6b6b 50%,transparent 50%); }Copy the code

• Border-left implementation (looks like a semicircle) :

  .shape {
    width: 200px;
    height: 100px;  
    border-top: 100px solid #ff6b6b;
    border-radius: 50%;
  }
  Copy the code

A quarter circle

• Border – the radius implementation:

  .shape {
    width: 120px;
    height: 120px;  
    background: #ff6b6b;
    border-top-left-radius: 100%;
  }
  Copy the code

• Border implementation:

  Similar to the implementation of a triangle

  .shape {
    width: 0px;
    height: 0px;  
    border: 100px solid transparent;
    border-top-color: #ff6b6b;
    border-radius: 100px;
    transform: rotate(-45deg);
  }
  Copy the code

• Overflow: hidden implementation

  .shape {
    width: 100px;
    height: 100px;  
    overflow: hidden;
    position: relative;
  }
  .shape::after {
    content:' ';
    position: absolute;
    width: 200px;
    height: 200px;
    background: #ff6b6b;
    border-radius: 50%;
  }
  Copy the code

Any fan

• Triangle + circle + overflow hidden implementation:

  Using the previous border triangle implementation method, we can implement the rectangle aligned with the center of the circle as shown in the figure below. Give the circle a transparent color and overflow hide, and eliminate the rectangle’s unwanted border to get a sector. The size of the center Angle of the sector is controlled by both border-left-width and border-right-width. The larger the two sides are, the larger the center Angle is — but the maximum is only 180 degrees.

  

  The code is as follows:

  HTML:

  <div class="shape"></div>
  Copy the code

  CSS:

  .shape {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
  }
  .shape::after {
    content:' ';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-left: 200px solid transparent;
    border-right: 200px solid transparent;
    border-top: 100px solid #ff6b6b;
    border-bottom: 100px solid transparent;  
  }
  Copy the code

  Source code: Codepen4

• Rectangle + semicircle + overflow hide

  Imagine a green rectangle with a red semicircle whose diameter is equal to the length of the rectangle. Rotate the semicircle around the center of the circle. As shown below:

  

  Therefore, by making the green rectangle transparent and adding the effect of overflow hiding, we can create a fan inside the rectangle by changing the rotation Angle of the semicircle. The code is as follows:

  HTML:

  <div class="shape"></div>
  Copy the code

  CSS:

  .shape {
    width: 200px;
    height: 100px;
    position: relative;
    overflow: hidden;
  }
  .shape::after {
    content:' ';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 100%;
    background: #ff6b6b;
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    transform-origin: top center;
    transform: rotate(30deg); 
  }
  Copy the code

  The effect is as follows:

  

  Source code: Codepen5

  However, there is a problem: the central Angle of the sector realized by this method cannot exceed 180 degrees, so how to realize the sector whose central Angle is greater than 180 degrees? Let’s use two semicircles instead.

• Two semicircles are implemented:

  The first two semicircles are stacked on top of each other. By rotating the top semicircles around the center, a fan can be formed with a central Angle greater than 180 degrees. As shown below:

  

The code is as follows:

HTML:

<div class="shape"></div>
Copy the code

CSS:

.shape {
  width: 200px;
  height: 100px;
  background: #36d793;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  position: relative;
}
.shape::before{
  content:' ';
  position: absolute;
  background: #36d793;
  width: 200px;
  height: 100px;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  transform-origin: bottom center;
  transform: rotate(30deg);
}
Copy the code

Source code: Codepen6

4. Trapezoidal

borderimplementation

As mentioned earlier, if you set a box with a width and height of 0 and give it a border, the box will look something like this:

Based on that, what happens if you give the box a width? The box would look like this:

In fact, this is intuitive, because you can imagine that the intersection of the four triangles is stretched horizontally, and the triangle changes. Now that the shape has trapezoids in it, it’s easy to make the unused blocks transparent, so the final code looks like this:

HTML:

<div class="shape"></div>
Copy the code

CSS:

.delta {
    width: 100px;
    height: 0px;
    border: 50px solid transparent;
    border-bottom-color: #ff6b6b;
}
Copy the code

The final effect is as follows:

Source code: Codepen7

• Size of trapezoid:

  By setting the width of div.delta, you can change the length of the trapezoid at the same time. You can change the size of the bottom corner by setting border-left-width and border-right-width. The wider the border, the smaller the bottom corner. You can also set border-bottom-width to control the height of the trapezoid. In some cases, you might want to make all changes to the div without changing the size of the original div. Box-sizing :border-box.

• Direction of trapezoid:

  Now our trapezoid is facing up or down. If we want to set the orientation to left or right, we can lengthen the contact vertically, giving it a height while keeping the width of the div at 0.

  

• Rectangular trapezoid:

  This section uses only one direction as an example. For the graph below:

  

  If we compress its border-left-width, the top Angle of the red trapezoid will drag to the left, approaching ninety degrees:

  

  When compressed to zero, the original isosceles trapezoid becomes a rectangular trapezoid as shown below:

  

Rectangle + triangle implementation

An isosceles trapezoid can also be thought of as consisting of a rectangle + two right triangles (same with other trapezoids) :

The code is as follows:

.shape {
    width: 200px;
    height: 120px;
    background-color: #36d792;
    position: relative;
}
.shape::before..shape::after {
    content:' ';
    position: absolute;
    width: 0;
    height: 0;
    border-top: 60px solid white;			
    border-bottom: 60px solid transparent;
}
.shape::before {
    border-left: 20px solid white;
    border-right: 20px solid transparent;
    left: 0;
}
.shape::after {
    border-left: 20px solid transparent;
    border-right: 20px solid white;
    right: 0;
}	

Copy the code

Source code: Codepen8

parallelograms

Transform :skew() is used to skew the rectangle. The code is as follows:

.shape {
    width: 200px;
    height: 120px;
    background-color: #36d792;
    transform: skew(20deg);
}
Copy the code

6. Pentagram

In fact, a pentacle can be thought of as a Mosaic of three triangles:

Length Settings:

• To facilitate subsequent calculations, try to make the waist of the top triangle 130px and the bottom triangle 100px. That is: set the top triangleborder-bottom-width120 px.border-left-width 和 border-right-widthAll 50 px.
• The following two triangles are also isosceles triangles and need to use geometric relations to calculate the length of each side. Obviously, if you know the area and the base of an isosceles triangle, you can figure out its height, and height is just thatborder-bottom-width. The length of each side of a triangle is130 + 50 * 2.130 + 50 * 2.(130 + 50) * 2According to Helen’s formula, the area of a triangle can be calculated from three sides, and since the base side is known, the height is 143pxborder-bottom-widthFor 143 px, andborder-left 和 border-rightIs half the width of the bottom side of the triangle, or 180px. So we can plot both triangles.
• All that remains is to adjust the offset of the absolute positioning and the rotation Angle of the two triangles. It’s not a standard pentacle because of the bias, but the general idea is this.

The final code is as follows:

.shape {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 120px solid #36d792;
    position: relative;
}
.shape::before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    border-left: 200px solid transparent;
    border-right: 200px solid transparent;
    border-bottom: 143px solid #36d792;	
    top: 106px;
    left: -192px;
    transform: rotate(36deg);		
}
.shape::after {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    border-left: 200px solid transparent;
    border-right: 200px solid transparent;
    border-bottom: 143px solid #36d792;	
    top: 106px;
    left: -206px;
    transform: rotate(-36deg);		
}
Copy the code

Source code: Codepen9

7. Star

The hexagonal star can be made with an equilateral triangle and an inverted triangle:

The code is as follows:

.shape {
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom: 80px solid #36d792;
    position: relative;
}
.shape::after {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-top: 80px solid #36d792;
    top: 30px;
    left: -50px;
}
Copy the code

Source code: Codepen10

8. Anise star

Do it with two rectangles, one of which is rotated 45 degrees around the center to form an octagon. The code is as follows:

HTML:

<div class="shape"></div>
Copy the code

CSS:

.shape {
  width:80px;
  height:80px;
  background: #36d792;
  position: relative;
}
.shape::after {
  content:' ';
  position: absolute;
  width:80px;
  height:80px;
  background: #36d792;
  transform: rotate(45deg);
}
Copy the code

Source code: Codepen11

The twelvepoint star

The twelvepoint star is similar to the octagon star, but with an extra rectangle and a different Angle of rotation. The code is as follows:

HTML:

<div class="shape"></div>
Copy the code

CSS:

.shape {
  width:80px;
  height:80px;
  background: #36d792;
  position: relative;
}
.shape::before..shape::after {
  content:' ';
  position: absolute;
  width:80px;
  height:80px;
  background: #36d792;
}
.shape::before {
    transform: rotate(30deg);
}
.shape::after {
    transform: rotate(-30deg);
}
Copy the code

Source code: Codepen12

The pentagon

In order to avoid tedious operation, here we use the formula “nine five top five five, eight five on both sides” to set the relevant length of the pentagon:

The pentagon can be regarded as an isosceles triangle + isosceles trapezoid, and the final code is as follows:

HTML:

<div class="shape"></div>
Copy the code

CSS:

.shape {
  width:0;
  height:0;
  border: 80px solid transparent;
  border-top-width: 0px;
  border-bottom: 59px solid #36d792;
  position: relative;
}
.shape::after {
  content:' ';
  position: absolute;
  width:100px;
  height:0;
  border: 30px solid transparent;
  border-bottom-width:0px;
  border-top: 95px solid #36d792;
  left: -80px;
  top:59px;
}
Copy the code

Source code: Codepen13

Hexagon 11.

A hexagon can be viewed as consisting of two isosceles triangles plus a rectangle, or as consisting of two isosceles trapezoids. Choose the second option here. The code is as follows:

HTML:

<div class="shape"></div>
Copy the code

CSS:

.shape {
  width:120px;
  height:0;
  border: 60px solid transparent;
  border-top-width: 0px;
  border-bottom: 104px solid #36d792;
  position: relative;
}
.shape::after {
  content:' ';
  position: absolute;
  width:120px;
  height:0;
  border: 60px solid transparent;
  border-bottom-width:0px;
  border-top: 104px solid #36d792;
  left: -60px;
  top:104px;
}
Copy the code

Source code: Codepen14

12. The octagon

The regular octagon can be seen as consisting of two isosceles trapezoids + a rectangle, coded as follows:

HTML:

<div class="shape"></div>
Copy the code

CSS:

.shape {
  width:102px;
  height:42px;
  background: #36d792;
  position: relative;
}
.shape::before..shape::after {
  content:' ';
  position: absolute;
  width:42px;
  height:0px;
  border: 30px solid transparent;
}
.shape::before {
  border-top-width:0px;
  border-bottom: 30px solid #36d792;
  top: -30px;
}
.shape::after {
  border-bottom-width:0px;
  border-top: 30px solid #36d792;
  top:42px;
}
Copy the code

Source code: Codepen15

13. The diamond

Common diamond

A common diamond can be thought of as two triangles, coded as follows:

HTML:

<div class="shape"></div>
Copy the code

CSS:

.shape {
  width:0px;
  height:0px;
  border: 40px solid transparent;
  border-top-width:0px;
  border-bottom: 70px solid #36d792;
  position: relative;
}
.shape::before {
  content:' ';
  position: absolute;
  width:0px;
  height:0px;
  border: 40px solid transparent;
  border-bottom-width:0px;
  border-top: 70px solid #36d792;
  left: -40px;
  top:70px;
}
Copy the code

Source code: Codepen16

Special diamond (90 degree Angle)

You can still do the above, but it’s easier to rotate a square around the center. The code is as follows:

HTML:

<div class="shape"></div>
Copy the code

CSS:

body {
  margin:80px;
}
.shape {
  width:100px;
  height:100px;
  background: #36d792;
  transform: rotate(45deg);
}
Copy the code

Source code: Codepen17

14. Shield

HTML:

<div class="shape"></div>
Copy the code

CSS:

.shape {
  width:0;
  height:0;
  border:50px solid transparent;
  border-top-width:0;
  border-bottom:20px solid #36d792;
  position: relative;
}
.shape::after {
  content:' ';
  position:absolute;
  width:0;
  height:0;
  border:50px solid transparent;
  border-bottom-width:0;
  border-top: 70px solid #36d792;
  left: -50px;
  top: 20px;
}
Copy the code

Source code: Codepen18

15. Diamond shaped

HTML:

<div class="shape"></div>
Copy the code

CSS:

.shape {
  width:35px;
  height:0;
  border:25px solid transparent;
  border-top-width:0;
  border-bottom:25px solid #36d792;
  position: relative;
}
.shape::after {
  content:' ';
  position:absolute;
  width:0;
  height:0;
  border:42px solid transparent;
  border-bottom-width:0;
  border-top: 70px solid #36d792;
  left: -25px;
  top: 25px;
}
Copy the code

Source code: Codepen19

16. Present,

This is the final result:

Although it seems to be made up of irregular geometric shapes, in fact, we can use regular geometric shapes stacked to form the taiji diagram. In a nutshell, it can be broken down into the following:

Use the background gradient mentioned in section 3 to create a half-circle of black and white:

.taiji {
    width:200px;
    height:200px;
    border-radius:50%;
    background-image: linear-gradient(to right,black 50%,white 50%);
}
Copy the code

Then realize two black and white concentric circles, the radius of the inner circle and the width of the outer ring (the outer ring can be used to do the border) can be calculated according to the geometric relationship, and then the concentric circles are respectively positioned on the top and bottom of the semicircle.

The final code is as follows:

.taiji {
    width:200px;
    height:200px;
    border-radius:50%;
    background: linear-gradient(to right,black 50%,white 50%);
    position: relative;
}
.taiji::before..taiji::after {
    content:' ';
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    left: -50%;
}
.taiji::before {
    background-color: white;
    border:40px solid black;
    top: 0;
}
.taiji::after {
    background-color: black;
    border:40px solid white;
    bottom: 0;
}
Copy the code

Let the tai Chi diagram move:

Now, you can set the taiji chart to rotate when the mouse moves in:

.taiji {
   	animation: rotate 1s linear infinite;	
	animation-play-state:paused;
}
.taiji:hover {
	animation-play-state:running;
}
@keyframes rotate {
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg); }}Copy the code

The effect is as follows:

Source code: Codepen20

17. Love

The heart can be seen as being formed by the rotation of two such shapes:

Set the transform-Origin on the left as the bottom-right vertex and rotate it 45 degrees clockwise about the point, and the Transform-Origin on the right as the bottom-left vertex and rotate it 45 degrees counterclockwise about the point to form the heart (rotate it 45 degrees because the bottom Angle of the heart is 90 degrees). The code is as follows:

HTML:

<div class="heart"></div>
Copy the code

CSS:

.heart {
  position: relative;
}
.heart::before..heart::after {
  content:' ';
  position: absolute;
  width:50px;
  height:80px;
  border-radius: 25px 25px 0 0;
  background: red;
}
.heart::before {
  transform-origin: right bottom;
  transform: rotate(45deg);
}
.heart::after {
  left:50px;
  transform-origin: left bottom;
  transform: rotate(-45deg);
}
Copy the code

Source code: Codepen21

18. Infinity symbol

The infinity symbol infinity can be thought of as being formed by rotation of the following two shapes:

First draw two rings, cancel the first ring at the lower right corner of the rounded corner, and rotate it counterclockwise 45 degrees; Uncircle the lower left corner of the second ring and turn it 45 degrees clockwise. The code is as follows:

HTML:

<div class="shape"></div>
Copy the code

CSS:

.shape {
  position: relative;
}
.shape::before..shape::after {
  content:' ';
  position: absolute;
  width: 60px;
  height: 60px;
  border: 20px solid #36d792;
}
.shape::before {
  border-radius: 50% 50% 0 50%;
  transform: rotate(-45deg);
}
.shape::after {
  border-radius: 50% 50% 50% 0;
  transform: rotate(45deg);
}
Copy the code

The resulting graph looks like this:

As you can see, the rings are partially overlapped, so you need to move the ::after pseudo-element to the right. By how much? I’m going to do a little bit of math here. For the convenience of observation, we modified the color and level of the two figures and made appropriate marks to obtain the following figure:

Shape :: After From A to B can form an infinity shape by moving.shape::after from A to B. The distance from side AB is made up of two hypotenuses, both of which are in an isosceles right triangle, so you can figure out the hypotenuse by finding the right sides of each triangle (A and B). As can be seen from the figure, a is 30 + 20 = 50, and the corresponding hypotenuse is 50√2, which is about 70; Shape :: After should be shifted 112 px to the right. Modify the code as follows:

.shape::after {
  border-radius: 50% 50% 50% 0;
  left: 112px;
  transform: rotate(45deg);
}
Copy the code

So now we have an infinity shape.

Source code: Codepen22

19. Pac-man

Pac-man is actually a fan with a central Angle of 270 degrees, which can be achieved using the previous method of drawing a quarter circle. The code is as follows:

HTML:

<div class="shape"></div>
Copy the code

CSS:

.shape {
  width: 0;
  height: 0;
  border: 100px solid #f5d54d;
  border-right-color: transparent;
  border-radius: 100px;
  position: relative;
}
.shape::before..shape::after {
  content:' ';
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
}
.shape::before {
  background: # 000;
  top: -70px;
  left: 5px;
}
.shape::after {
  background: #f5d54d;
  top: -12px;
  left: 60px;
}
Copy the code

Source code: Codepen23

20. Curved tail arrow

Here is a common curved arrow icon:

This icon can be viewed as consisting of two shapes: a triangle and an arc, which is implemented by border + rounded corners.

First draw the triangle:

HTML:

<div class="shape"></div>
Copy the code

CSS:

.shape {
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-left-color: #198bf6;
   	position: relative;
    transform: rotate(40deg);
}
Copy the code

Give.shape a pseudo-element with its border-top as an arc and rounded corners:

.shape::after {
    content: ' ';
    position: absolute;
    width: 40px;
    height: 40px;
    border-top: 10px solid #198bf6;
    border-radius-top-left: 100px;
}
Copy the code

The degree of bending can be adjusted by width and border-radius.

Now we see something like this:

The arc is positioned relative to the vertices of the triangle and needs to be moved 40+20 = 60px to the left relative to the vertices and 10/2 = 5px up:

.shape::after {
    left: -60px;
    top: -5px;
}
Copy the code

And then you end up with the icon that you started with.

Source code: Codepen24

21. Chat bubbles

Type 1:

This is a chat bubble similar to wechat. We observed that the triangle had rounded corners, so instead of using triangle and rectangle, we used a rotated square and rectangle — that is, after positioning the square relative to the rectangle in the middle, we rotated it 45 degrees. The code is as follows:

HTML:

<div class="shape"></div>
Copy the code

CSS:

.shape {
  width: 200px;
  height: 100px;
  background: #21d86d;
  position: relative;
  border-radius: 10px;
}
.shape::after {
  content:' ';
  position: absolute;
  width: 20px;
  height:20px;
  background: #21d86d;
  border-radius: 2px;
  top:50%;
  transform: translate(-35%, -50%) rotate(45deg);
}
Copy the code

Source code: Codepen25

Type 2:

This type of bubble has a border and a background color. We can still do the same as above, but be careful to remove the two borders of the square. The code is as follows:

HTML:

<div class="shape"></div>
Copy the code

CSS:

.shape {
  width: 200px;
  height: 100px;
  border-radius: 8px;
  background: #faf8f4;
  border: 1px solid #e6d9b3;
  position: relative;
}
.shape::after {
  content:' ';
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 15px;
  height: 15px;
  background: #faf8f4;
  border: 1px solid #e6d9b3;
  border-style: none none solid solid
}
Copy the code

Source code: Codepen26

Type 3:

This is similar to QQ chat bubbles, here we use the method introduced in section 20 to do the tail. The code is as follows:

HTML:

<div class="shape"></div>
Copy the code

CSS:

.shape {
  width: 200px;
  height: 100px;
  background: #01a0ff;
  border-radius: 20px;
  position: relative;
}
.shape::after {
  content:' ';
  position: absolute;
  left: -20px;
  width: 40px;
  height: 40px;
  border-bottom: 20px solid #01a0ff;
  border-bottom-left-radius: 100px;
}
Copy the code

Source code: Codepen27

22. RSS feeds

This is a common RSS feed icon. Rounded rectangles and white dots inside are easy to implement. So how should two white arcs be realized? It might be easy to imagine that each of the two white arcs is a border with a quarter red circle, so it can be done as follows:

In fact, it’s easier to use CSS3’s box-shadow inner shadow:

/ * x offset | y offset | fuzzy shadow radius | | | shadow diffusion radius of the shadow color inner shadow * / box – shadow: 2 p 2 p 2 px 1 px rgba (0, 0, 0, 0.2) an inset.

You can first draw a quarter circle inside the rounded rectangle, and then use the inner shadow to put three alternate arcs (white arc, red arc and white arc) into the circle. The x offset and Y offset control the coordinates of the arc, and the shadow diffusion radius controls the width of the arc. This method is obviously much simpler than the first method.

The final code is as follows:

HTML:

<div class="shape"></div>
Copy the code

CSS:

.shape {
  width: 165px;
  height: 165px;
  padding: 35px;
  border-radius: 30px;
  background-color: #ff4802;
  position: relative;
}
.shape::before {
  content:' ';
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #fff;
  bottom: 40px;
}
.shape::after {
  content:' ';
  position: absolute;
  width: 165px;
  height: 165px;
  border-top-right-radius: 165px;
  box-shadow:
    -14px 14px 0 14px #fff inset,
    -28px 28px 0 28px #ff4802 inset,
    -42px 42px 0 42px #fff inset;    
}
Copy the code

Source code: Codepen28

23. Badge ribbons

The badge ribbon can be seen as a circle + two triangles transformed as follows:

HTML:

<div class="shape"></div>
Copy the code

CSS:

.shape {
  position: relative;
  background: #00a1fb;
  height: 100px;
  width: 100px;
  border-radius: 50%;
}
.shape::before..shape::after {
  content: ' ';
  position: absolute;
  border: 40px solid transparent;
  border-bottom: 70px solid #00a1fb;
  border-top: none;
  top: 70px; 
}
.shape::before {
  left: -10px;
  transform: rotate(-140deg);
}
.shape::after {
  right: -10px;
  transform: rotate(140deg);
}
Copy the code

Source code: Codepen29

24. TV

A TV set can be seen as consisting of the following two shapes superimposed together:

In both cases, the rectangle is given a rounded corner whose horizontal and vertical radii differ greatly. The code is as follows:

HTML:

<div class="shape"></div>
Copy the code

CSS:

.shape {
  position: relative;
  width: 200px;
  height: 150px;
  margin: 20px 0;
  background: #00a1fb;
  border-radius: 50% / 10%;
}
.shape::after {
  content:' ';
  position: absolute;
  background-color: #00a1fb;
  top: 10%;
  bottom: 10%;
  left: -5%;
  right: -5%;
  border-radius: 5% / 50%;
}
Copy the code

Source code: Codepen30

25. A magnifying glass

Magnifying glasses are also simple to implement. The handle of the original text, it is a magnifying glass to the right then, rotate, actually we can directly handle position to the right, then go to rotate. The shape not. Shape: : after, so you can easily control handle orientation.

HTML:

<div class="shape"></div>
Copy the code

CSS:

.shape {
  width: 80px;
  height: 80px;
  border: 20px solid #01a0fe;
  border-radius: 50%;
  position: relative;
  transform: rotate(-45deg);
}
.shape::after {
  content:' ';
  position: absolute;
  left: 50%;
  top: 90px;
  transform: translateX(-50%);
  width: 18px;
  height: 65px;
  background: #01a0fe;
}
Copy the code

Source code: Codepen31

26. Facebook

Facebook’s logo is made up of three elements: a blue square, a horizontal line and an arc. The horizontal line is an isosceles trapezoid, which can be done using the method described above; An arc can be viewed as part of a rounded rectangle, so how do you show that part only in the blue square? We can draw a rounded rectangle with a blue background and a white border, place only part of it in the blue square, and then set the blue square to overflow hide. As shown below:

In order for the white letter F to overflow and hide before it touches the right edge of the blue square, the blue square has a blue border.

The code is as follows:

HTML:

<div class="shape"></div>
Copy the code

CSS:

.shape {
    width: 100px;
    height: 110px;
    background-color: #3b589c;
    border-radius: 6px;
    border: 15px solid #3b589c;
    border-bottom: none;
    position: relative;
    overflow: hidden;
}
.shape::before {
    content: ' ';
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: #3b589c;
    border: 20px solid #fff;
    border-radius: 27px;
    left: 56px;
}
.shape::after {
    content: ' ';
    position: absolute;
    top: 37px;
    left: 37px;
    width: 58px;
    height: 0;
    border-right: 4px solid transparent;	
    border-top: 20px solid #fff;		
}
Copy the code

Source code: Codepen32

The moon in 27.

The moon can actually be thought of as a partial overlap of two circles of the same radius:

So do you really need to draw two circles in a real implementation? No, it’s easier to use CSS3’s box-shadow for the bottom circle.

/ * x offset | y offset | | | fuzzy shadow radius shadow diffusion radius of the shadow color * / box – shadow: 2 p 2 p 2 px 1 px rgba (0, 0, 0, 0.2);

We can draw a circle first and then shadow it. The x and Y offsets together control the shape and Angle of the moon:

Since no blur effect is required, the blur radius is set to 0; The radius can control the size of the moon. If set to 0, it means the same size as another circle. The final shadow color property controls the color of the moon.

The final code is as follows:

HTML:

<div class="shape"></div>
Copy the code

CSS:

.shape {
  width:100px;
  height: 100px;
  border-radius: 50%;
  box-shadow: 40px 0px 0 0 #f4bd2e;
}
Copy the code

Source code: Codepen33

28. Indicating arrow

Indicating arrows can be done in two ways:

The original text adopts the method of the left picture, which uses a rectangle + two triangles to achieve, but we cannot determine the color of the background indicating the arrow, so we cannot determine the color of the first triangle. If you use the right image, you don’t need to worry about the background color and it is much easier to implement (two rectangles + skew).

HTML:

<div class="shape"></div>
Copy the code

CSS:

.shape {
  position: relative;
}
.shape::before..shape::after {
  content:' ';
  position: absolute;
  width: 200px;
  height: 20px;
  background: #00a1fb;
}
.shape::before {
  transform: skew(45deg);
}
.shape::after {
  transform: skew(-45deg);
  top:20px;
}
Copy the code

Source code: Codepen34

29. The lock

HTML:

<div class="shape"></div>
Copy the code

CSS:

body {
  margin: 100px;
}
.shape {
  width: 140px;
  height: 100px;
  background: #01a0ff;
  border-radius: 15px;
  position: relative;
}
.shape::before {
  content:' ';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 40px;
  border-radius: 10px;
  background: #fff;  
}
.shape::after {
  content:' ';
  position: absolute;
  top: -63px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 45px;
  border-radius: 48px 48px 0 0 / 48px 48px 0 0;
  border: 18px solid #01a0ff;
  border-bottom: none;  
}
Copy the code

Source code: Codepen35

30. Bookmarks/flags

This is a common bookmark/flag icon, which is a rectangle + triangle. The code is as follows:

HTML:

<div class="flag">
    <div class="text">adopt</div>
</div>
Copy the code

CSS:

.flag {
    width: 56px;
    background-color: # 009961;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
.text {
    position: relative;
    padding: 9px 6px;
    text-align: center;
    color: white;
}
.text::after {
    content:' ';
    position: absolute;
    left: 0;
    top: 36px;
    border-width: 16px 28px;
    border-color: # 009961;
    border-style: solid;
    border-bottom: 16px solid transparent;
}
Copy the code

Note that rectangle. Text ::after is a rectangle, not a square, and needs to be set by border-width: since the overall width needs to be the same as the parent box, the width of the left and right border should be half of the overall width. Finally, fine-tune with absolute positioning to get the image above.

Source code: Codepen36

Reference:

The shapes of CSS

N ways to draw a triangle and the open world of browsers