CSS draws triangles and arrows instead of images

“This is the third day of my participation in the First Challenge 2022. For details: First Challenge 2022”

preface

Still making arrows and triangles out of pictures, that’s too Lou. CSS can do all this easily, and you can change the color size as you want without worrying about distortion. Let’s start with this code:

/**css*/
.d1{
    width: 0; 
    height: 0; 
    border: 100px solid # 339933;
}
/**html*/
<div class="d1"></div>
Copy the code

/**css*/
.d2{
    width: 0; 
    height: 0;
    border-width: 100px;
    border-style: solid;
    border-color:#FFCCCC  #0099CC  # 996699  # 339933;
}
/**html*/
<div class="d2"></div>
Copy the code

Look at these two pieces of code, and the effect of the picture, is there a point? < span style = “box-sizing: border-box; color: RGB (51, 51, 51); line-height: 22px; font-size: 14px! Important; word-break: inherit! Important;

Triangle example

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*/
<div class="d3"></div>
Copy the code

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*/
<div class="d4"></div>
Copy the code

The next two are left to the smart you, I believe you can do it, it is so simple! There’s another style that we can use to create triangles that can’t be angled, and that’s 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*/
<div class="d4"></div>
Copy the code

Arrow in the sample

The arrow to the left

/**css*/
.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*/
<i class="left"> < /div>
Copy the code

Did you find that the arrow and the triangle are the same? If you see it, you know it. The arrows are two triangles. Overlay the blue triangle with the white one and stagger it by 1px to make the arrows just right. It’s the same thing as the Brain Cascade ablation project.

Up arrow

/**css*/
.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*/
<i class="top"> < /div>
Copy the code

Transform: Rotate (90deg) : Rotate (90deg) : Rotate (90deg) : Rotate (90deg) : Rotate (90deg) :rotate(90deg) :rotate(90deg)