CSS draw a triangle, CSS rendering hollow triangle, CSS realize arrow

 One ❀ lead

Two days because fewer project work, to see the retired and sit on GitHub face questions about the article included more day, after all, next year there are new plans. One problem is included in the CSS  to create a triangle with css, and outlined principles  . Of course, for me it is not difficult to draw a triangle, and outlined principles? I suddenly surprised a moment, though I know they can do it through the border, so why set the border can achieve it, holding this question so with this article, then the beginning of this article.

 II ❀ CSS draw a triangle

1. different understanding of the border

Students write CSS style frame border deal with it like every morning to embrace the sun, those days Gargan as usual bowel has always been in my mind, like a thin line border, if it should be to describe the shape of a rectangle.

<div class="border"></div>

.border {
    width: 50px;
    height: 50px;
    border: 2px solid;
    border-color: #96ceb4 #ffeead #d9534f #ffad60;
}

For example, in this case, in my opinion it is different from four wide and 200px 2px high rectangular color patchwork into a square. Now we will set the border bigger, a little tune under Review:

.border {
    width: 50px;
    height: 50px;
    border: 50px solid;
    border-color: #96ceb4 #ffeead #d9534f #ffad60;
}

When the border is wide enough, this response came like a picture frame border we've seen in life, it is a patchwork of four trapezoidal made. The white center area is the width and height of elements, now we will get rid of the element width and height:

.border {
    width: 0;
    height: 0;
    border: 50px solid;
    border-color: #96ceb4 #ffeead #d9534f #ffad60;
}

So now what color triangle you want it? For example, I want to Red China, it will be on the left and right border color is set to transparent, so you get a red horned triple-speed (up to stem).

.border {
    width: 0;
    height: 0;
    border: 50px solid;
    border-color: transparent transparent #d9534f;
}

Of course, this is not perfect, although we can not see the color of the top, still occupies part of the height, really uncomfortable for obsessive-compulsive disorder, we then removed the height of the border.

.border {
    width: 0;
    height: 0;
    border-style:solid;
    border-width: 0 50px 50px;
    border-color: transparent transparent #d9534f;
}

3.CSS draw a hollow triangle (frame only)

So now we just want to draw a border open triangles how to do it, first of all triangle itself is implemented by the border, so I can not add a border at the border, the most direct way is to re-create a little triangular positioning up.

Here I use pseudo-classes and then define a smaller triangle, you can see something like this:

.border {
    width: 0;
    height: 0;
    border-style:solid;
    border-width: 0 50px 50px;
    border-color: transparent transparent #d9534f;
    position: relative;
}
.border:after{
    content: '';
    border-style:solid;
    border-width: 0 40px 40px;
    border-color: transparent transparent #96ceb4;
    position: absolute;
    top: 0;
    left: 0;
}

Can see the small triangle to the top of the triangle is aligned large and small triangle left exactly aligned with the central portion of the large triangle. This is because the pseudo-class reference object positioning element content area is not anything we did not hide before the other three triangles, four triangular center is the parent element.

So simple to fine-tune the positioning, you can see the effect becomes this:

.border:after {
    content: '';
    border-style: solid;
    border-width: 0 40px 40px;
    border-color: transparent transparent #96ceb4;
    position: absolute;
    top: 6px;
    left: -40px;
}

Finally, we will replace the border color of small white triangle, then a border only hollow triangle was born:

4. Implement an arrow

Arrow achieve a better say, before the triangle as large as our positioning triangle set, simple positioning, such as this:

Then change the background color to white:

Of course, we can add even a straight line by a pseudo class before, it looks like an arrow:

 

 The total three ❀

So here, we have introduced to achieve a triangle through the practice of CSS borders, but also describes the use of small triangulation mode to draw a only border open triangles, and finally also describes how to make an arrow, if the event in the future work to such a demand, of course, it can also be easily resolved, then this article will introduce here.

 reference

CSS method of drawing a triangle -border

[CSS] Day 6 creates a triangle with css, and principles outlined