这个倒立的三角效果 css 怎么实现?

Question

Answer 1

要实现这样带发光的倒三角，为何不直接用背景图片呢？

Answer 2

最好是让UI给你张图 要不会很麻烦

下边是大致实现的css

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

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

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

Answer 3

你这图上还有发光的图案，用代码来写也不是不行，只是时间上得不偿失，兼容性、性能方便也差，综合考虑还是还是老实的用图片吧。