Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.