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

This article mainly introduces how to use CSS to achieve triangle marking, the article is very detailed, has a certain reference value, interested friends must read it!

The code is as follows:

CssMark.html

CssMark.css

.TriMarkPre0 {

Position:static

Width:100px

Height:100px

Border:10pxsolidtransparent

Border-color:#0058e2

}

.TriMarkPre1 {

Position:static

Width:100px

Height:100px

Border:10pxsolidtransparent

Border-left-color:#0058e2

}

.TriMarkPre2 {

Position:static

Width:0px

Height:0px

Border:10pxsolidtransparent

Border-left-color:#0058e2

}

.TriMark {

Position:static

Width:0px

Height:0px

Border:5pxsolidtransparent

Border-left-color:#0058e2

}

Code detailed explanation

Create process 1:

The following code is the code that draws the bounding box of the pixel area of 100x100. This is the general code.

The box at the top of the execution result image corresponds to the code.

.TriMarkPre0 {

Position:static

Width:100px

Height:100px

Border:10pxsolidtransparent

Border-color:#0058e2

}

Creation process 2:

Using the following code, draw only the left side of the area frame. If you draw on the left, you can see that the corners are cut diagonally. (when you draw 4 edges, draw only half so that each line does not overlap. )

This code corresponds to the code that will execute the second trapezoidal side of the resulting image.

.TriMarkPre1 {

Position:static

Width:100px

Height:100px

Border:10pxsolidtransparent

Border-left-color:#0058e2

}

Complete:

You can use the following code to draw triangle markers.

By reducing the height of the code on the left side of the previous line, the part between the lines disappears and it appears as a triangle marker.

The third diagram of the execution result image corresponds to the code.

.TriMarkPre2 {

Position:static

Width:0px

Height:0px

Border:10pxsolidtransparent

Border-left-color:#0058e2

}

You can change the size of the triangle marker by reducing the border width of the line.

The fourth diagram of the execution result image corresponds to the code.

.TriMark {

Position:static

Width:0px

Height:0px

Border:5pxsolidtransparent

Border-left-color:#0058e2

}

The above is all the content of the article "how to use CSS to achieve triangle marking". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

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.