CSS how to achieve triangles, arrows, prompt box, to find out

Time:2022-5-8

1. Set a border for a rectangle to see how it changes

CSS how to achieve triangles, arrows, prompt box, to find out

<section>
< H4 > see a normal rectangular change process < / H4 >
    <div class="b">
        < div class = "B1" > set the normal width and height of the border < / div >
        <div class="b2">border-top</div>
        <div class="b3">border-right</div>
        <div class="b4">border-left</div>
        <div class="b5">border-bottom</div>
        <div class="b6">background</div>
    </div>
</section>
.b{
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    font-size: 10px;
    text-align: center;
}
.b1{
    width: 100px;
    height: 70px;
    border:5px solid #00aaff;
    margin-right: 10px;
    margin-bottom: 10px;
}
.b2{
    width: 100px;
    height: 70px;
    border:5px solid #00aaff;
    border-top: 5px solid #ff557f;
    margin-right: 10px;
    margin-bottom: 10px;
}
.b3{
    width: 100px;
    height: 70px;
    border:5px solid #00aaff;
    border-top: 5px solid #ff557f;
    border-left: 10px solid #550000;
    margin-right: 10px;
    margin-bottom: 10px;
}
.b4{
    width: 100px;
    height: 70px;
    border:5px solid #00aaff;
    border-top: 5px solid #ff557f;
    border-left: 10px solid #550000;
    border-right:15px solid #3EFF8B;
    margin-right: 10px;
    margin-bottom: 10px;
}
.b5{
    width: 100px;
    height: 70px;
    border:5px solid #00aaff;
    border-top: 5px solid #ff557f;
    border-left: 10px solid #550000;
    border-right:15px solid #3EFF8B;
    border-bottom:20px solid #ffff7f;
    margin-right: 10px;
    margin-bottom: 10px;
}
.b6{
    width: 100px;
    height: 70px;
    background: pink;
    border:5px solid #00aaff;
    border-top: 5px solid #ff557f;
    border-left: 10px solid #550000;
    border-right:15px solid #3EFF8B;
    border-bottom:20px solid #ffff7f;
    margin-right: 10px;
    margin-bottom: 10px;
}

2. Change the width and height of the rectangle

When the width or height of the rectangle is 0, trapezoid + triangle appears.
When the width and height of the rectangle are 0, a triangle appears.
From this step, we can roughly know how the trapezoid and triangle are formed.
CSS how to achieve triangles, arrows, prompt box, to find out

3. When the height of the rectangle is 0

After removing the border top, we can get the second picture in the figure below. When the border left and border right are set to transparent, a trapezoid appears. Select this ladder with rotate to get a downward ladder.
Similarly, when the border bottom is removed and the border left and border right are set to transparent, a downward trapezoid can also be obtained.
CSS how to achieve triangles, arrows, prompt box, to find out

< div class = "B10" > height is 0, trapezoid + triangle appears < / div >
< div class = "B11" > remove border top < / div >
< div class = "B11 Tixing" > < p > get trapezoid < / P > < / div >
< div class = "B11 Tixing rotate" > < p > Rotate < / P > < / div >
.b10{
    width: 50px;
    height: 0;
    background: pink;
    border-top: 60px solid #ff557f;
    border-left: 60px solid #550000;
    border-right:60px solid #3EFF8B;
    border-bottom:60px solid #ffff7f;
    margin-right: 20px;
    margin-bottom: 10px;
}
.b11{
    width: 50px;
    height: 0;
    border-left: 60px solid #550000;
    border-right:60px solid #3EFF8B;
    border-bottom:60px solid #ffff7f;
    margin-right: 20px;
    margin-bottom: 10px;
}
.b11-tixing,.b11-tixing-rotate{
    width: 50px;
    height: 0;
    border-left: 60px solid transparent;
    border-right:60px solid transparent;
    border-bottom:60px solid #ffff7f;
    margin-right: 20px;
    margin-bottom: 10px;
    
}
.b11-tixing-rotate{
    transform: rotate(-180deg);
}
.b11-tixing-rotate p{
    transform: rotate(180deg);
}

Set other conditions, you can also get some desired graphics.
CSS how to achieve triangles, arrows, prompt box, to find out

4. When the width of the rectangle is 0

When the width is 0, you can get the corresponding trapezoid. Of course, this trapezoid can also be obtained by rotating. The method is not unique. You can know it.
CSS how to achieve triangles, arrows, prompt box, to find out

5. When the width and height of the rectangle are all 0

When the width and height of the rectangle are all 0, you can see that there are many triangles when setting different borders.
CSS how to achieve triangles, arrows, prompt box, to find out

6. Solid triangle

If you want a downward isosceles triangle, you just need
(1) : remove the border bottom
(2) : change border left and border right to transparent
It can be understood as follows: set the corresponding two sides as transparent and an upper triangle, then set the border bottom, remove the border top and the lower triangle, set the border top and remove the border bottom. Set border right for the left triangle and border left for the right triangle.
If you want a right triangle:
(1) : just set both sides, border top, border right
(2) : border right is set to transparent
Others can try more. You can find that they exist regularly.
CSS how to achieve triangles, arrows, prompt box, to find out

<section>
    < H4 > here comes the solid triangle < / H4 >
    <div class="b">
        <div class="b25"></div>
        <div class="b26"></div>
        <div class="b27"></div>
        <div class="b28"></div>
        <div class="b29"></div>
        <div class="b30"></div>
        <div class="b31"></div>
        <div class="b32"></div>
        <div class="b33"></div>
    </div>
</section>
.b25{
    width: 0;
    height: 0;
    border-top: 80px solid #A8C992;
    border-left: 80px solid transparent;
    border-right:80px solid transparent;
    margin-right: 20px;
    margin-bottom: 10px;
}
.b26{
    width: 0;
    height: 0;
    border-bottom: 80px solid #A8C992;
    border-left: 80px solid transparent;
    border-right:80px solid transparent;
    margin-right: 20px;
    margin-bottom: 10px;
}
.b27{
    width: 0;
    height: 0;
    border-left: 80px solid #A8C992;
    border-top: 40px solid transparent;
    border-bottom:40px solid transparent;
    margin-right: 20px;
    margin-bottom: 10px;
}
.b28{
    width: 0;
    height: 0;
    border-right: 80px solid #A8C992;
    border-top: 40px solid transparent;
    border-bottom:40px solid transparent;
    margin-right: 20px;
    margin-bottom: 10px;
}
.b29{
    height: 0;
    width: 0;
    border-color: #6c94c2 #193eaf transparent transparent;
    border-style: solid solid dashed dashed;
    border-width: 40px 40px 0 0;
    margin-right: 20px;
    margin-bottom: 10px;
}
.b30{
    height: 0;
    width: 0;
    border-top: 40px solid #a4d1eb;
    border-right: 80px solid transparent;
}
.b31{
    height: 0;
    width: 0;
    border-bottom: 40px solid #a4d1eb;
    border-right: 80px solid transparent;
}
.b32{
    height: 0;
    width: 0;
    border-top: 40px solid #aa007f;
    border-left: 80px solid transparent;
}
.b33{
    height: 0;
    width: 0;
    border-bottom: 40px solid #aa007f;
    border-left: 80px solid transparent;
}

7. Hollow triangle

Implementation principle: first define a solid triangle normally, and use pseudo elements to define a triangle whose color is white which is slightly smaller than the solid triangle.
CSS how to achieve triangles, arrows, prompt box, to find out

.b34{
    width: 0;
    height: 0;
    border-top: 80px solid #A8C992;
    border-left: 80px solid transparent;
    border-right:80px solid transparent;
    margin-right: 20px;
    margin-bottom: 10px;
    position: relative;
}
    
.b34::after{
    content: "";
    position:absolute;
    top: -79px;
    left: -78px;
    width: 0;
    height: 0;
    border-top: 78px solid #fff;
    border-left: 78px solid transparent;
    border-right:78px solid transparent;
}

8. Equilateral arrow

There are two ways to implement an arrow:
1. Set the corresponding width and height (the width and height must be equal, otherwise you will get an arrow with different lengths), and set border top and border right to get the following:
CSS how to achieve triangles, arrows, prompt box, to find out
Use transform: rotate (- 45DEG) to rotate to get arrows with different angles.
**2. Set the padding value instead of width and height. The larger the padding value, the larger the arrow. For example, padding: 5px.
Then use transform: rotate (- 45DEG) to rotate to get arrows with different angles**
CSS how to achieve triangles, arrows, prompt box, to find out

9. Isosceles arrow

Principle: first define a solid triangle normally, and use pseudo elements to define a triangle with white color slightly smaller than the solid triangle. Cover part of this large triangle to realize isosceles triangle arrow.
CSS how to achieve triangles, arrows, prompt box, to find out

10. Implementation prompt box

Principle:
A normal rounded rectangle + a hollow triangle
(this hollow triangle is a triangle implemented by two pseudo elements, one of which has a white background color and is smaller than the colored triangle)
CSS how to achieve triangles, arrows, prompt box, to find out

11. Some other styles can be obtained through pseudo elements

Try more and you will find many different things.
CSS how to achieve triangles, arrows, prompt box, to find out

12. Example source code (under continuous update)

https://gitee.com/susuhhhhhh/css_demos