Use Css and Div to 'draw' a triangle_html/css_WEB-ITnose

When I saw this navigation, I was wondering if this kind of triangle could be realized through css and html, so I looked for information on the Internet. It is organized as follows:
1. The idea is very simple. Look at the picture below (does each side look like the base of a triangle)

html:

<div class="triangle"></div>

Css:

.triangle{               border-style:solid;            border-width: 10px;            border-top-color:#009246;            border-left-color: #CE2B37;            border-bottom-color:#5E5E5E;            border-right-color: #000; }

2. What does it look like when the width and height of the div element are 0 (other attributes remain unchanged, set both width and height to 0)?

Is each side a triangle?

If you want it to be larger, set the border-width attribute value to be larger.

3. If we want an upward triangle, then we don’t show the other three sides and just keep the border-bottom. So set the border-color of the other three sides to transparent and see the effect.

The triangle comes out.

If you want to adjust the position of the triangle, you can set it by setting the properties of div.triangle{position:relative; top:0;right:10px;}.

The final result is this:

The code is as follows:

<!--html--><div class="triangle"></div><div class="drop-down">呵呵，把这个div放到三角div后面，背景色和那个border-color颜色设置成一样就好了</div>

/*Css*/       .triangle{            width:0px;            height:0px;            border-style:solid;            border-width: 10px;            border-color:transparent;            border-bottom-color:#5E5E5E;            position:relative;            top:0;            left:20px;        }        .drop-down{            width:150px;            padding:10px;            border-radius:5px;            background:#5E5E5E;            color:white;        }

Extension: If you use pseudo elements: before and :after, you don’t have to create a blank div element (the principle is naturally the same as using a blank div above) same).

If the arrow is on the top or left, use :before; on the right or bottom, use :after.

<!--html--><div class="no-empty-div">我们不需要空白的div来实现箭头了</div>

/*Css*/        .no-empty-div{            width:150px;            padding:10px;            border-radius:5px;            background:#5E5E5E;            position:relative;              }        .no-empty-div:before{            content:"";            display: block;            border-color: transparent;            border-bottom-color: #5E5E5E;            border-width: 10px;            border-style:solid;            width:0;            height:0;            position:absolute;            bottom:100%;            right:50%;        }

Below is a left arrow (you can compare it with the upward code to see the position change ):

<!--html--><div class="no-empty-div">我们不需要空白的div来实现箭头了</div>

/*Css*/  .no-empty-div{            width:150px;            padding:10px;            border-radius:5px;            background:#5E5E5E;            position:relative;        }        .no-empty-div:before{            content:"";            display: block;            border-color: transparent;            border-right-color: #5E5E5E;            border-width: 10px;            border-style:solid;            width:0;            height:0;            position:absolute;            top:20%;            right:100%;        }