The stone teaches you how to draw triangles and arrows with pure CSS3.

Often see some triangular graphics on some websites, but these are usually pictures, and now the stone teaches you how to use pure CSS3 technology to draw triangles.

Here are the steps, and you'll know how to draw triangles and arrows as you look at them again.

1, create a new element, whatever element, but I habitually will use block elements to do. If the inline element is display:block it.

<div class= "box" ></div>

2, the width of its height set to height:0px; width:0px;

3, set the border border property, used to implement the triangle.

First of all to understand how border specifically, I wrote a style like this, the specific code is as follows:

<! DOCTYPE html>

As follows:


This is equivalent to stretching four borders to the center of the square, respectively.

The above code appears with 4 triangles merged into a square. Here is clear, as long as the desired reservation, the other set as transparent can achieve the effect of the triangle,

4, example
Draw downward, right, and left-up triangles, respectively.
The implementation code is as follows.

! DOCTYPE html>
        . box4{            margin:0 Auto;            width:0px;            height:0px;            border:50px solid transparent;            Border-bottom-color: #333333;        }    </style>

As follows:


From the shape can be seen:
Drawing a downward triangular arrow is equivalent to stretching the top border down.
Border-top-color: #2DCB70;

Drawing an upward triangular arrow is equivalent to stretching the bottom border upward.
Border-bottom-color: #333333;

Drawing the left triangular arrow is equivalent to extending the right border to Zola.
Drawing the right triangle arrow is equivalent to stretching the left border to the right.

After reading the above you will also learn to use CSS to draw triangle arrows.


The stone teaches you how to draw triangles and arrows with pure CSS3.