Border in CSS can also play like this

Before reading this article you may think that border is just a simple draw border, read this article, I believe you will also like me to say "I am, the original CSS border can play this way." This article is mainly long ago to see others using pure CSS to draw a triangle after their own ideas of the finishing, the text will introduce the effects of several small icons.

Draw the egg shape with border in CSS:

Yes, you're right. Here's what to do to draw an egg-like effect.

Idea: We first use Div to draw a square, then use set border-radius:50%, so we can get a round effect, the code is as follows:

HTML code:

<div class= "Div" ></div>

CSS code:

. div {    width:100px;    height:100px;    line-height:100px;    Background-color:aqua;    Text-align:center;    border-radius:50%;}

　

Results

　

Think: egg-shaped structure, eggs a little elliptical, but it divided the head and small heads. Is there any way we can turn the previous circle into an ellipse first?

Idea: We change the width or height of the div to make them inconsistent and see if we can get the effect we want.

Realization: We change width:50px individually, or height:50px; (change only one of them), when

Think: We've got the oval effect, and how do we achieve the big head and small heads?

Idea one: We then split the ellipse and then control the width inconsistency. (This method is unsuccessful)

Idea two: We set the percentage of Border-radius. When border-radius:100%; with the former

Method is as follows:

Try again to separate the values of the percentage of Border-radius (not shorthand, write 4 directly), and then control the percentage inconsistency. Key code:

border-radius:50% 50% 50% 50%/62% 62% 38% 38%;

At this point the results are:

Use border in CSS to draw triangles:

I believe we all know that Border-color is the control of the border color, but you may not have tried this, look at the following code:

Html:

<div class= "Div" ></div>

Css:

. div {    width:100px;    height:100px;    border:50px solid transparent;    Border-color:yellow green red Aqua;}

　　

Think of one: what if the div is not wide?

Implementation results:

Thinking two: The previous effect is to get four triangles, do we have any way to separate the triangle from that div?

Idea: There is no contact with the div separation (specifically should not exist), but we have to buckle a button CSS definition "cascading style", to transform our thinking, we have no way to cover the triangle we do not want?

How to do this: set the color we need for our background color – white, right so we can get the effect we want. The code is as follows (for example, for the triangle above):

Border-color:yellow White White;

Is this the way to finish our triangle effect?

We can try to modify the whole body's background color to black, see what's changed:

found that the div still occupies such a large space, and the background color is set to white is not the most scientific

Think four: How do we set the unwanted color to disappear?

Idea: We will not want to show the color set to the parent container background color, border-color:yellow transparent transparent transparent;

The results are as follows:

Think three: How do we set the div to not occupy that much space?

Idea: Directly remove the border width of the desired triangle's edge

How to do this: (this time, for example, for the following triangle), the code is as follows:

div{
width:0px;
height:0px;
border-bottom:50px solid red;
border-left:50px solid Transparent;
border-right:50px solid Transparent;
}

Results

Some thoughts on the extension of triangles:

Think of a: our usual triangle has acute triangle, obtuse triangle, right triangle, equilateral triangle, isosceles triangle, etc., we have what way let us directly get is we want triangle effect not?

Idea: When the bottom and horizontal lines parallel, we directly by controlling the aspect ratio to achieve the triangle effect we want, when it is not coincident with the horizontal line, this time is more complex, you need to use the aspect ratio and CSS3 in the transform attribute and the rotate combination, Let our triangles show the effect we want (here is just an introduction to the idea, not to concrete implementation, which has to do with the knowledge of mathematics can own Baidu).

Think two: Can we use multiple triangles to spell more shapes together?

(This can be, for example, we can use two triangles and a rectangle to make parallelogram, even we use a number of div together to spell a simple chalet effect ...) ）

Add:

1, in our thinking of a front of the picture, we can see that in fact, the middle of a few are trapezoidal, with the same method, we can get the effect of trapezoid (concrete practice no longer introduced).

2, through the rotation, we can turn our square into a diamond effect

Making polygons (for example in hexagon)

First, let's analyze the hexagon to see if we can break it down into a simple graph we said earlier,

Analysis: In the example above, we can see that the hexagon consists of two triangles and a rectangle.

Think one: Do we have any way to put these three graphs together?

Idea: Use pseudo-elements: after and: Before, then draw graphics in their respective areas

The reference code is as follows:

<!        DOCTYPE html>
　　
(Of course, the knowledge here describes a situation, you can also try to find the triangle on the same side)
Making a multi-angle star (take the hexagonal star for example)
Analysis: Try to use the previous method, we analyze the structure of the hexagonal star, we can understand that a hexagonal star is composed of two triangles together, the next is good to do, we directly look at the code:
<!        DOCTYPE html>
Final implementation effect
The production of pentagram (actually more difficult than the hexagonal star): We first draw a pentagram, then divide it into three, and then use the previous steps to achieve, here I just listed a method as a reference (which has a few details of the processing is a bit complicated), the analysis diagram is as follows:
The reference code is as follows:
<!        DOCTYPE html>
　　
CSS Small icon effect:
Are you still not seeing the fun here? Here to share your own CSS small icon: the creation of a dialog box
The creation of the dialog box:
Analysis: The dialog consists of a triangle and a rounded corner
Implementation: The code is as follows:
<!        DOCTYPE html>
Implementation results:
Border in CSS can also play like this