Shitou teaches you how to draw triangles and arrows using pure CSS3. _html/css

Shitou teaches you how to draw triangles and arrows using pure CSS3. _html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:52:18

Original

2083 people have browsed it

We often see some triangular graphics on some websites, but usually these are pictures. Now Shitou will teach you how to draw triangular graphics using pure CSS3 technology.

The following are the specific steps. After reading these, you will understand how to draw triangles and arrows.

1. Create a new element, any element, but I habitually use block elements. If the element is inline, display:block it.

2. Set its width and height to height:0px; width:0px;

3. Set The border attribute is used to implement triangles.

First of all, we need to understand what the border looks like. I wrote a style like this. The specific code is as follows:

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>绘制三角形</title>    <style>        .box{            margin: 20px auto;//设置图形居中            width: 0px;            height: 0px;            border: 50px solid transparent;            border-top-color: #2DCB70;            border-right-color:gold;            border-bottom-color: #333333;            border-left-color: red;        }    </style></head><body><div class="box"></div><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div></body></html>

Copy after login

Screenshot As follows:

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

The above code appears to merge 4 triangles into a square. It’s very clear here. Just keep what you want and set the others to transparent to achieve the triangle effect,

4, example

Draw downward, right, left and upward triangles respectively.

The implementation code is as follows.

!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>绘制三角形</title>    <style>        .box{            margin: 20px auto;            width: 0px;            height: 0px;            border: 50px solid transparent;            border-top-color: #2DCB70;            border-right-color:gold;            border-bottom-color: #333333;            border-left-color: red;        }        .box1{            margin: 5px auto;            width: 0px;            height: 0px;            border: 50px solid transparent;            border-top-color: #2DCB70;        }        .box2{            margin: 5px auto;            width: 0px;            height: 0px;            border: 50px solid transparent;            border-left-color: red;        }        .box3{            margin: 5px auto;            width: 0px;            height: 0px;            border: 50px solid transparent;            border-right-color:gold;      <span style="white-space:pre">	</span>}

Copy after login

        .box4{            margin: 0 auto;            width: 0px;            height: 0px;            border: 50px solid transparent;            border-bottom-color: #333333;        }    </style></head><body><div class="box"></div><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div></body></html>

Copy after login

The screenshot is as follows:

As can be seen from the above graphics:

Drawing a downward triangular arrow is equivalent to stretching the upper border downward.

border-top-color: #2DCB70;

Drawing an upward triangular arrow is equivalent to stretching the lower border upward.

border-bottom-color: #333333;

Drawing a triangle arrow to the left is equivalent to moving the right border to Left stretch.

Drawing a right-facing triangular arrow is equivalent to stretching the left border to the right.

After reading the above, you will learn to draw triangular arrows with CSS.