Example code for implementing triangles and arrows through CSS borders

1. CSS Box Model

The box includes: margin, border, padding, content
The borders have smooth oblique lines at their junctions. By using this feature, you can get small triangles and the like by setting the width and color of each border.
The div element is a block-level element and is displayed as a block box, which can be used for specific implementation.

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

**Example 1, **Generally, after setting the height, width and border, the box will appear as follows:

.triangle {
   width: 25px;  
   height: 25px;  
   overflow: hidden;
   font-size: 0;
   line-height: 0;            
   border-width: 50px;               
   border-style: solid;
   border-color: rgb(235, 54, 241) rgb(86, 245, 139) rgb(76, 0, 255) rgb(46, 205, 245);
}

Note: overflow, font-size, and line-height are set because IE6 will have the default font size and line height, causing the box to appear as a stretched long rectangle.

Example 2: After setting the width and height in Example 1 to 0, the box appears as follows:

.triangle {
  width: 0;  
  height: 0;  
  overflow: hidden;
  font-size: 0;
  line-height: 0;            
  border-width: 50px;               
  border-style: solid;
  border-color: rgb(235, 54, 241) rgb(86, 245, 139) rgb(76, 0, 255) rgb(46, 205, 245);
}

At this point, you can see that the box is made up of four triangles. If you keep only one color and set the other three colors to be transparent or the same color as the background, you can achieve a triangle. Depending on the edges you choose to leave in different positions, you can present triangles with different orientations.

Example 3: Keep only the bottom edge

.triangle {
   width: 0;  
   height: 0;  
   overflow: hidden;
   font-size: 0;
   line-height: 0;            
   border-width: 50px;               
   border-style: solid;
   border-color: transparent transparent rgb(76, 0, 255) transparent;
}

Example 4: The width and height in Example 3 are retained to obtain a trapezoid

width: 0;  
height: 0;

Example 5: Implementing Arrows

The arrow is actually achieved by stacking two triangles at an offset position.
Cover the blue triangle with a white triangle offset by 1px to form an arrow.

The following style implements an upward arrow:

. arrow {
   position: absolute;
}
. arrow:before,. arrow:after{
   position: absolute;
   content: '';
   border-top: 10px transparent solid;
   border-left: 10px transparent solid;
   border-right: 10px transparent solid;
   border-bottom: 10px #fff solid;
}
. arrow:before{
   border-bottom: 10px #0099CC solid;
}
. arrow:after{
   top: 1px; /*Override and stagger 1px*/
   border-bottom: 10px #fff solid;
}

Summarize

The above is the example code that I introduced to you to realize triangles and arrows through CSS borders. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!