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

Source: Internet
Author: User

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.