Usage of css-border attribute: Use the css border attribute to create a triangle

The outer margin of the element is the border of the element. An element's border is one or more lines that surround the element's content and inner borders. Each border will have three properties: width, style, and color. In the following article, we will introduce different examples from these three aspects and use the CSS border property to create a triangle.

Let’s first take a look at the effect achieved by the css border attribute:

 <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 When reducing 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 width and height of the element , 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 time we find that when the width and height of the element are 0, it will become four squeezed together. triangle. Therefore, if the color of three of the borders is defined as transparent, then we will get a triangle!

Set the color of the three borders to transparent color:

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

<p></p>

The running effect is as follows:

##We find the orientation of the small triangle through the code Is in the opposite direction to the edge name with the opaque color set. <p></p>For example, we set border-top-color: blue; The direction of the small triangle is downward. <p></p>

Tips:

When we use the small triangle, because the four borders form a rectangle, we just set the other three sides to transparent colors. It still occupies a position in the document. In order to facilitate layout, we can set the opposite side of the small triangle to none; the specific 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 operation effect is as follows: <p></p>

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

<div></div>

The operation effect is as follows:<p></p>

Application:

When we want to make this kind of layout, we can use this method To make small triangles, you no longer need to use img or background to achieve it.

<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>

rrree

The running effect is as follows: <p></p>

Expand it:

   

       
我的课程<p></p>
       
我的老师<p></p>
       
学习时长<p></p>
   

<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>

The running effect is as follows: <p></p>

Recommended related articles: <p></p>

CSS border-left-color property_html/css_WEB-ITnose

##CSS border property tutorial (color style)

Recommended related courses:

<p></p>CSS in-depth understanding of border video tutorial

The above is the detailed content of Usage of css-border attribute: Use the css border attribute to create a triangle. For more information, please follow other related articles on the PHP Chinese website!