Usage of the Css-border property: Making a triangle with CSS border properties

The outer margin of the element is the bounding rectangle of the element (border). The border of an element is one or more lines around the element's content and the inner edge. Each border will have three properties: width, style, and color. In the following article, we will be specific to the three aspects to introduce different examples and the use of CSS border properties to make a triangle.

Let's take a look at the effect of the CSS border property:

<style>div{    width:100px; height:50px;    border:30px solid red;    Border-right-color:green;    Border-bottom-color:blue;    Border-left-color:yellow;    } </style>

<div></div>

The effect is as follows:

When we lower the width of the box, the code is as follows:

<style>div{    width:20px; height:50px;    border:20px solid red;    Border-right-color:green;    Border-bottom-color:blue;    Border-left-color:yellow;    } </style>

<div></div>

The effect is as follows:

When we remove the element width, the code is as follows:

<style>div{    width:0;     border:50px solid red;    Border-right-color:green;    Border-bottom-color:blue;    Border-left-color:yellow;    } </style>

<div></div>

The effect is as follows:

At this point we find that when the width of the element is 0 o'clock, it becomes a four triangle squeezed together. So if you define the color of the three borders as a transparent color transparent, then we'll get a triangle!

Set the color of the three border to transparent color:

<style>p{    width:0;    border:20px solid transparent;    Border-top-color:blue;} </style>

<p></p>

The results are as follows:

Through the code we find that the direction of the small triangle is the opposite of the name of the edge with the opaque color set.

For example, we set up the Border-top-color:blue; The direction of the small triangle is facing down.

Tips:

When we use the small triangle, because the four border formed a rectangle, we just set the other three edges of the transparent color, they still occupy the position in the document, in order to facilitate the layout, we can set the small triangle opposite the side is none, the principle is as follows:

<style>div{   width:0; height:0;   border-top:20px solid blue;   border-left:20px solid red;   border-right:20px solid Green;   Border-bottom:none;  } </style>

<div></div>

The results are as follows:

div{  width:0;    border:20px solid transparent;   border-top:20px solid blue;   Border-bottom:none;}

<div></div>

The results are as follows:

Application:

When we want to make this layout, we can use this method to make the small triangle, do not have to use IMG or Backgroud to implement.

<style>       ul {           overflow:hidden;       }              Li {           list-style:none;           line-height:60px;           Text-align:center;           Float:left;           width:120px;           Background: #f1f1f1;           margin-right:1px       }              li p {           width:0;           border:8px solid transparent;           Border-bottom-color: #666;           Border-top:none;           Float:right;           margin:26px 10px 0 0       }   </style>

   <ul>       <li> My courses <p></p></li>       <li> my teacher <p></p></li>       <li> Learning duration <p></p></li>   </ul>

The results are as follows:

Expand:

<style>   div{       margin:50px   }   div:nth-child (1) {       width:0;       border:30px solid transparent;       border-bottom:80px solid red;       /* Border-top:none; *   /} div:nth-child (2) {       width:0;       border-top:30px solid blue;       Border-right:none;       border-left:90px solid transparent;       Border-bottom:none;   }   Div:nth-child (3) {       width:0;       border-top:30px solid blue;       border-right:90px solid transparent;       border-left:10px solid transparent;       Border-bottom:none;   } </style>

   <div></div>   <div></div>   <div></div>

The results are as follows:

Related articles recommended:

CSS Border-left-color Properties _html/css_web-itnose

CSS Border Border Properties Tutorial (color style)

Related Courses recommended:

CSS in-depth understanding of border video tutorial