Create a small triangle using the CSS border
As we all know, the border of an element is one or more lines around the content and inner margin of the element. The CSS border property allows you to specify the style, width, and color of an element’s border.
In HTML, we use tables to create borders around text, but by using CSS border properties, we can create borders that look great and can be applied to any element.
Inside the element margin is the element’s border. An element’s border is one or more lines around the element’s content and inside data.
Let’s look at the effect of some elements with border
div{
width: 100px; height: 20px;
border: 20px solid red;
border-right-color: green;
border-bottom-color: blue;
border-left-color: black;
}
Copy the codeThe effect is as follows:
When we try to reduce the width and height of the box, or even remove the width and height:
div{
width: 20px; height: 20px;
border: 20px solid red;
border-right-color: green;
border-bottom-color: blue;
border-left-color: black;
}
Copy the codeThe effect is as follows:
div{
width: 0;
border: 20px solid red;
border-right-color: green;
border-bottom-color: blue;
border-left-color: black;
}
Copy the codeThe effect is as follows:
At this point, we find that when the width and height of the elements are zero, they become four triangles squeezed together. Therefore, we can imagine that if we define the color of the three borders as transparent, we will get a triangle!
Set the color of the three borders to transparent:
p{
width: 0;
border: 20px solid transparent;
border-top-color: blue;
}
Copy the codeThe effect is as follows:
The code shows that the triangle is oriented in the opposite direction from the name of the side with the opaque color.
For example, we set border-top-color: blue; The little triangle is facing down.
tip
When we use the triangle, because the four borders form a rectangle, we just make the other three edges transparent. They still occupy space in the document. For layout purposes, we can set the edge opposite the triangle to None. The specific principles are as follows:
div{
width: 0; height: 0;
border-top: 20px solid blue;
border-left: 20px solid red;
border-right: 20px solid green;
border-bottom: none;
}
Copy the codeThe effect is as follows:
div{
width: 0;
bordet:20px solid transparent;
border-top: 20px solid blue;
border-bottom: none;
}
Copy the codeThe effect is as follows:
Small application
When we want to make this layout, we can make small triangles in this way instead of using IMG or backgroud.
<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>
Copy the code <ul>
<li>I of course<p></p></li>
<li>Recent browse<p></p></li>
<li>Contact customer service<p></p></li>
</ul>
Copy the codeThe effect is as follows:
A small extension
<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>
Copy the code <div></div>
<div></div>
<div></div>
Copy the codeThe effect is as follows:
We can also set the border to be different pixels to achieve the desired effect.