How can the triangle effect of the handstand be realized by css?

clipboard.png

Mar.07,2021

to achieve such a glowing inverted triangle, why not just use the background image?


it's better to ask UI to give you a picture. It won't be troublesome

the following is a rough implementation of css

<div id='chevron'></div>
        -sharpchevron {
            position: relative;
            text-align: center;
            margin-bottom: 6px;
            height: 100px;
            width: 200px;
            background: red;
        }

        -sharpchevron:before {
            width: 0px;
            height: 0px;
            border-top: 50px solid red;
            border-left: 100px solid transparent;
            position: absolute;
            left: 0;
            top: 100%;
            content: '';
        }

        -sharpchevron:after {
            width: 0px;
            height: 0px;
            border-top: 50px solid red;
            border-right: 100px solid transparent;
            position: absolute;
            right: 0;
            top: 100%;
            content: '';
        }

you still have a glowing pattern on this picture, so it's not bad to write it with code, but the loss outweighs the gain in time, compatibility and performance are also poor, so you'd better use the picture honestly.

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-7c2a4c-2757a.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-7c2a4c-2757a.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?