How does CSS draw triangles and arrows
This article mainly explains "how to draw triangles and arrows in CSS". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to draw triangles and arrows by CSS.
Let's take a look at this code first:
/ * * css*/.d1 {width: 0; height: 0; border: 100px solid # 339933;} / * * html*//**css*/.d2 {width: 0; height: 0; border-width: 100px; border-style: solid; border-color:#FFCCCC # 0099CC # 996699 # 339933;} / * html*/
After reading these two pieces of code, and the effect picture, do you have any idea? Originally, you only need to use the `border` of the element to control the triangle drawing. `border` controls the size, `border- style` controls the style (solid line, dashed line, etc.), and `border- color` controls the color, which is divided into top, right, bottom and left.
Triangle exampl
Downward triangle
/ * * css*/.d3 {margin-left: 10px; float: left; width: 0; height: 0; border-width: 100px; border-style: solid; border-color:#FFCCCC transparent transparent transparent;} / * * html*/
Left triangle
/ * * css*/.d4 {margin-left: 110px; float: left; width: 0; height: 0; border-width: 100px; border-style: solid; border-color: transparent # 0099CC transparent transparent;} / * * html*/
The word `transparent` here means transparent
The next two kinds are left to the smart you. I believe you can do it. Only then do you know that it is so simple!
In fact, we can also use a style to achieve triangles that cannot be angled, and that is to use the rotation `transform:rotate (90deg) `in CSS3.
/ * * css*/.d4 {margin-left: 110px; float: left; width: 0; height: 0; border-width: 100px; border-style: solid; border-color: transparent # 0099CC transparent transparent; transform: rotate (90deg); / * rotate 90 °clockwise * /} / * * html*/ arrow example
Left Arrow
/ * * css*/.left {position: absolute;} .left: before,.left:after {position: absolute; content:'; border-top: 10px transparent dashed; border-left: 10px transparent dashed; border-bottom: 10px transparent dashed; border-right: 10px # fff solid;} .left: before {border-right: 10px # 0099CC solid;} .left: after {left: 1px; / * overwrite and stagger 1px*/ border-right: 10px # fff solid;} / * html*/
CSS draws triangles and arrows instead of using pictures
Do you find that arrowheads are the same as triangles? Found that you already understand, arrowheads are actually two triangles, and then covered with white triangles blue triangles, and staggered 1px, just formed an arrow. This is the same as the "strongest brain" cascading ablation program.
Up Arrow
/ * * css*/.top {position: absolute;} .top: before,.top:after {position: absolute; content:'; border-top: 10px transparent dashed; border-left: 10px transparent dashed; border-right: 10px transparent dashed; border-bottom: 10px # fff solid;} .top: before {border-bottom: 10px # 0099CC solid;} .top: after {top: 1px; / * overwrite and stagger 1px*/ border-bottom: 10px # fff solid;} / * html*/
Through the above two examples, I think you should be able to handle the arrows in the remaining two directions, but you can't, then you can do one, and then rotate the angle through `arrows (90deg) `, and still be able to handle the arrows in all directions.
At this point, I believe you have a deeper understanding of "how to draw triangles and arrows in CSS". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!
