三角全底css

Question

我想要那样做:

但是我用css做了很多麻烦......有人可以帮帮我吗？

这是我最好的尝试:

.flag.vertical {
    background-color: #dd7758;
    height: 0;
    padding-bottom: 25px;
    text-align: center;
    color: white;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent white transparent;
}

<div class="flag-wrapper"><span class="flag vertical">-5%</span></div>

我怀疑是要在底部制作这个白色三角形.这里的文本和字体系列的垂直对齐无关紧要.

非常感谢!

Answer 1

设置width为0

.flag-wrapper{ background-color: #dd7758;
    height: 0;
    padding-bottom: 25px;
   text-align: center;
    color: white;
    border-style: solid;
    border-width: 20px 20px 20px 20px;
    border-color: transparent transparent white transparent;
    width: 0; 
    }

span{
margin-left:-10px
}

<div class="flag-wrapper"><span>-5%</span></div>