“This is the 22nd day of my participation in the November Gwen Challenge. See details of the event: The Last Gwen Challenge 2021”.

Let’s start with a CSS property

Border-radius: allows you to set the rounded edges of an element's borders. Identify a circle when using one radius and an ellipse when using two. The intersection of this circle with the border creates a rounded corner effect.Copy the code

The way I understand it,

Such as the border - the radius: 50%; If only one value is set, this is equivalent to border-radius: 50/50%; So when/is omitted, the value is set to the horizontal half Angle, and if the slash is present, the horizontal half Angle in front and the vertical half Angle behind.Copy the code

Draw the ellipse

width: 200px; height: 100px; border-radius: 50%; Equivalent to border-radius: 100px/50px; Width: 100px; height: 100px; border-radius: 50% 20% /10% 40%;Copy the code

Draw a triangle

         .border{
        width: 0;
        height: 0;
        border: 100px solid red;
    }
 
Copy the code

Are you curious why it is visible when both width and height are 0?

Next, set a different color for the border

 border-bottom-color: aqua;
Copy the code

And you’ll see that it looks like this

So if you want to draw a triangle in either direction you just have to make the other border color transparent.

What about oblique triangles if you want them?
transform: skew(); This can be done using this property.Copy the code

For example, drawing a common dialog box can be completed by using pseudo-class elements to draw triangles.

1) Draw a square with rounded corners. 2) Draw triangles for pseudo-class elements and position them.Copy the code

The class name son is the class of the dialog box.

1) use the CSS more common layout (child must parent phase. That is, the parent element is positioned relative and the child element is positioned absolute. 2) Left50% top50% by positioning, and 50% up/left by transform are also the main ways to achieve vertical centralization of the box. It should be noted that in absolute positioning, left: 50% refers to 50% of the parent element, because it is translated relative to the upper-left corner of the parent element, which is also easier to understand. 50% translation in transform refers to 50% of its own size, which can be understood as referring to itself because there is no reference.Copy the code