CSS Learning Notes

triangle

We can use the border property to draw the triangle

Let’s start by reviewing the border property, which is usually used to put a border around a block, as shown in the figure below

.box-begin{
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
Copy the code

In fact, the border prototype is not like the image above. We increase the size of the border property and the effect is shown below.

.box{
            width: 100px;
            height: 100px;
            border: 100px solid;
            border-color: blue red green purple;
        }
Copy the code

We set the width and length of the content to 0, and the effect is as follows. We can use this property to construct any triangle shape we want!

.box-clear{
            width: 0px;
            height: 0px;
            border: 100px solid;
            border-color: blue red green purple;
        }
Copy the code

We can create a triangle by setting the color of any three triangles to transparent based on the image above.

.triangle{
            border-color: transparent transparent yellowgreen; } // Make the top, left and right transparent (as shown below)Copy the code

Insert a tip here for the order of colors and values

  • // when the left, right, and right values are up or down
  • // when the value is up, right, down, and left
  • // when the value is 2
  • //4 directions with 1 value

If we want to get a special triangle, such as equilateral triangle, isosceles triangle, right triangle, etc., we can set the color of the four regions and the corresponding border-width size.

/* Equilateral triangle */
      border-width: 100px 173px;
      border-color: transparent blue transparent transparent;

 /* Isosceles triangle */
      border-width: 100px 80px;
      border-color: transparent transparent blue transparent;

Copy the code

If we want to get a triangle with a border, we can put two triangles on top of each other. Here we need to use the positioning method, the first triangle is positioned relative to each other, the second triangle is positioned absolutely, and then use the pseudo-element after and set the values of top and left to move the second triangle to the appropriate position.

Specific implementation recommend this article: www.jianshu.com/p/9a463d50e…

Adaptive square

If we want to get the adaptive square, using a simple percentage to achieve is not very reliable, since the size of the percentage are high relative to the parent element width size, the percentage of the outermost element set is corresponding to the screen, if the parent element width is not set, high percentage is set up, there is no effect.

We can do this with vw

.box-square{
            width: 25vw;
            height: 25vw;
            background-color: yellowgreen;
        }
Copy the code

We can also implement this using the after pseudo-element

.box {
  width: 50%;
}
.box:after {
  content: "";
  display: block;
  padding-top: 100%;
}
Copy the code

The padding-top or margin-top values are set based on the width of the parent element.

I’m going to use vertical padding whether it’s padding-bottom or padding-top or margin-top.

If we want to add text to the square, and the text is also adaptive, we need to set the absolute position of the text to achieve this.

circular

If we want to get a circle, set the border-radius variable based on the triangle above and change the radian to get the circle we want. The effect and CSS code are shown below.

.circle{
            height: 0;
            width: 0;
            border: 100px solid;
            border-radius: 50%;
            border-color:  blue red green purple;
        }
Copy the code

If we want a sector at any Angle, as shown in the image below, we can set it using the after pseudo-element and the transform property.

Specific implementation recommend this article: www.cnblogs.com/magicg/p/12…

“T” shape

If we want to implement the following polygons, we can use the clip-path property to do so.

Clip-path translates to clipping path. According to the parameters passed in, the inner region is displayed and the outer region is not displayed.

There is also a shape-outside property that allows text to be arranged around shapes.

Here we go from 00 to 100% 0 –> 100% 20%…

Outline the approximate coordinates of the T-shape, as shown below.

.T{
      float: left;
      width: 150px;
      height: 150px;
      margin: 0 20px;
      clip-path: polygon(
        0 0.100% 0.100% 20%.60% 20%.60% 100%.40% 100%.40% 20%.0 20%
      );
      background: lightblue;
    }
Copy the code


If there are better drawing points welcome to add and correct ~

Article history

Flex Layout

CSS Grid Layout

CSS Learning Notes 【 Box Model 】