How to use css to realize the frame with arrowhead
This article mainly introduces "how to use css to achieve the frame with arrowhead". In daily operation, I believe many people have doubts about how to use css to achieve the frame with arrowhead. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the question of "how to use css to achieve the frame with arrowhead". Next, please follow the editor to study!
Implement a normal border
.border {
Width: 100px
Height: 50px
Border: 1px solid red
}
Realize a square consisting of four triangles
.triangle {
Width: 0
Height: 0
Border: 100px solid red
Border-right-color: green
Border-left-color: blue
Border-top-color: black
}
Triangle
. triangle-bottom {
Width: 0
Height: 0
Border: 100px solid transparent
Border-top-color: red
}
Set the lower left and right color to transparent transparent to get the down arrow
Put the triangle in the border
. border-triangle {
Width: 100px
Height: 50px
Border: 1px solid red
Position: relative
}
. border-triangle:before {
Content: ""
Position: absolute
Width: 0
Height: 0
Border: 4px solid transparent
Border-top-color: red
Left: 50%
Margin-left:-4px
Bottom:-8px
}
Set the triangle to absolute positioning, use margin-left and left to position in the middle of the element, bottom setting-8px, near the bottom of the border
Cover up redundant triangles
.border-triangle-bottom {
Width: 100px
Height: 30px
Border: 1px solid # 1d9cd6
Position: relative
Border-radius: 4px
}
.border-triangle-bottom:after
.border-triangle-bottom:before {
Content: ""
Position: absolute
Width: 0
Height: 0
Border: 4px solid transparent
Border-top-color: # 1d9cd6
Left: 50%
Margin-left:-4px
Bottom:-8px
}
.border-triangle-bottom:after {
Border-top-color: # fff
Bottom:-7px
}
Change the border color to a good-looking blue, set the before and after pseudo elements to absolute positioning, position them in the play at the bottom of the border, set the after pseudo elements to white, and the bottom offset is greater than before 1px, covering the color at the bottom of the triangle. Such a good-looking arrow border is realized.
At this point, the study on "how to use css to achieve a frame with arrowheads" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!
