How to use CSS to realize triangle marking
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!
