Pure CSS to achieve a single div regular polygon transformation

In the previous article, we introduced how to use the before and after pseudo-elements to make Material Design-style buttons. The key technology is to make good use of the border width and the width and height of the div body. Therefore, this article will add another effect, which is to use CSS purely to transform a "single" div from a regular triangle to a regular octagon (a single div can only be a regular octagon at most), and finally use the animation effect to turn it into a regular polygon transformation animation. Because regular polygons require a lot of trigonometric function calculations, for convenience, the sides of regular polygons are uniformly set to 100px here.

Equilateral Triangle

An equilateral triangle does not require pseudo-elements. It can be created by setting the border width of the div itself. Let's first look at the side length and midline of the equilateral triangle. If the side length is 100px, the midline is rounded to 87px (100 x sin (60) = 87).

Therefore, we need to set the length and width of the div to 0, then set the width of the bottom border to 87px and the width of the left and right borders to 50px (the color is set to transparent), and we can make a beautiful triangle.

width:0;
height:0;
border-width:0 50px 87px ;
border-style:solid;
border-color:transparent transparent #095; 

square

A square should be the simplest. Just set the length and width to the same value. However, there are actually two other methods. The first is to set the length and width to 0, and set the top, bottom, left and right borders to 50px. The second is to set the height to 0, the width to 100px, and then set the width of one side to 100. Both are possible.

.a{
width:100px;
height:100px;
background:#c00;
}
.b{
width:0;
height:0;
border-width:50px;
border-style:solid;
border-color:#095;
}
.c{
width:100px;
height:0;
border-width:0 0 100px;
border-style:solid;
border-color:#069;
} 

Regular pentagon

For a regular pentagon, we need to use basic trigonometric functions. Let's first decompose the regular pentagon, use the original div as the upper triangle, and then use a pseudo-element to make the lower trapezoid. Since the angle between each side of the regular pentagon is 108 degrees, we can use trigonometric functions to calculate that the height of the upper triangle is 59px (100 x cos (54)) and the width is 192px (100x sin (54) x 2). The height of the lower trapezoid is 95px (100 x sin (72)), and the width of the long side is 192px, the same as the upper triangle.

After understanding the principle, you can use pseudo-elements to match and produce it!

.a{
      position:relative;
  width:0;
  height:0;
  border-width:0 81px 59px;
      border-style:solid;
  border-color:transparent transparent #069;
}
.a:before{
  position:absolute;
  content:"";
  top:59px;
  left:-81px;
  width:100px;
  height:0;
  background:none;
  border-width:95px 31px 0;
  border-style:solid;    
  border-color:#069 transparent transparent;
    }

Regular hexagon

Each angle of a regular hexagon is 120 degrees. If we look at it from a purely CSS perspective, we can make a regular hexagon by changing the triangle on the regular pentagon. That is, it becomes a combination of two trapezoids. The long side of the trapezoid is 200px (100 x cos(60) x 2 + 100), and the height of the trapezoid is 87px (100 x sin(60)).

So you can make a regular hexagon by just slightly modifying the CSS of the regular pentagon.

.a{
      position:relative;
    width:100px;
    height:0;
    border-width:0 50px 87px;
      border-style:solid;
    border-color:transparent transparent #f80;
}
.a:before{
  position:absolute;
  content:"";
    top:87px;
    left:-50px;
    width:100px;
    height:0;
  background:none;
    border-width:87px 50px 0;
  border-style:solid;    
    border-color:#f80 transparent transparent;
    } 

Regular heptagon

Starting with the regular heptagon, you must use the after pseudo-element, because the regular heptagon must be broken down into three memory blocks, using the original div as the upper triangle, a pseudo-element as the middle trapezoid, and another pseudo-element as the bottom trapezoid. The angle of the regular heptagon is special. It is not an integer, but 128 and 4/7 degrees. The second decimal place is approximately 128.57, so the calculation result is as shown in the figure below. The key point is that you must clearly know the length and width.

After you have the length and width, you can start writing with CSS!

.a{
      position:relative;
    width:0;
    height:0;
    border-width:0 90px 43px;
      border-style:solid;
    border-color:transparent transparent #09c;
}
.a:before{
  position:absolute;
  content:"";
    top:140px;
    left:-112px;
    width:100px;
    height:0;
    border-width:78px 62px 0;
  border-style:solid;    
    border-color:#09c transparent transparent;
    }
  .a:after{
    position:absolute;
    content:"";
    top:43px;
    left:-112px;
    width:180px;
    height:0;
    border-width:0 22px 97px;
    background:none;
    border-style:solid;
    border-color:transparent transparent #09c;
  } 

Regular octagon

A regular octagon is actually made by changing the triangle on top of a regular heptagon into a trapezoid, and then changing the trapezoid in the middle into a rectangle. The angle of the regular octagon is 135 degrees, and the calculated lengths and widths of each area are shown in the figure below.

If you understand the same principle, it will be much easier to do it with CSS!

.a{
      position:relative;
    width:100px;
      height:0;
      border-width:0 71px 71px;
      border-style:solid;
    border-color:transparent transparent #f69;
}
.a:before{
  position:absolute;
  content:"";
    top:171px;
      left:-71px;
      width:100px;
      height:0;
      border-width:71px 71px 0;
  border-style:solid;    
      border-color: #f69 transparent transparent;
    }
  .a:after{
      position:absolute;
      content:"";
      top:71px;
      left:-71px;
      width:242px;
      height:0;
      border-width:0 0 100px;
      background:none;
      border-style:solid;
      border-color:transparent transparent #f69;
  } 

summary

The above is a regular polygon transformation of a single div made purely using CSS. If you are skilled, you can actually add animation effects to make a transformation animation like the example below! However, the example below uses another div to wrap it outside to perform the size transformation animation to avoid the loose joints caused by the size transformation. You can refer to it!

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.