Stone teaches you how to draw triangles and arrows with pure CSS3 ., Css3 Rendering

Stone teaches you how to draw triangles and arrows with pure CSS3 ., Css3 Rendering

Some Triangular images are often seen on some websites, but they are usually images. Now, stone teaches you how to use pure css3 technology to draw triangular images.

The following are specific steps. Once you read these steps, you will know how to draw triangles and arrows.

1. Create an element, whatever it is, but I often use block elements. If the element in the row is displayed: block it.

<Div class = "box"> </div>
 
2. Set its width and height to height: 0px; width: 0px;
 
3. Set the border attribute to implement triangles.
 
First, you need to know what border is like. I wrote a style like this, and the specific code is as follows:
 

<! DOCTYPE html> 


As follows:




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


The code above shows that four triangles are merged into a square. It is very clear here, as long as you keep the desired, other settings to transparent can achieve the effect of the triangle,


4. Instance
Draw down, right, and left 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:




We can see from the shape:
Draw a downward triangle arrow, which is equivalent to stretching the upper border down.
Border-top-color: #2DCB70;



Draw the up triangle arrow, which is equivalent to stretching the bottom border up.

Border-bottom-color: #333333;



Draw a triangle arrow to the left, which is equivalent to stretching the right border to the left.

Draw the right triangle arrow, which is equivalent to stretching the left border to the right.



After reading the above, you will learn to use CSS to draw the triangle arrow.