css实现带边框向上的三角形

181 阅读1分钟

注释:如果大家需要把vw 修改成自己对应的sass方法,或者修改成相对于的单位如(px)。边框颜色之类的可以修改成自己需要的(最后这句完全凑字数,简介最少50字)

<div class="content"></div>
<style>
.content{
    margin-right: vw(28);    border: vw(2) solid #fff;    display: inline-block;    width: vw(210);    padding: vw(20) 0;    line-height: vw(37);    border-radius: vw(10);    color: #333;    letter-spacing: 0;    font-weight: 400;    text-align: center;    font-size: vw(26);    background-color: #fff;    &:before{          box-sizing: content-box;          width: 0px;          height: 0px;          position: absolute;          top: vw(-34);          left: 50%;          transform: translateX(-50%);          border-bottom: vw(18) solid #fff;          border-top: vw(18) solid transparent;          border-left: vw(18) solid transparent;          border-right: vw(18) solid transparent;          content: '';          z-index: 3;        }        &:after{          width: 0;          height: 0;          position: absolute;          top: vw(-40);          left: 50%;          transform: translateX(-50%);          border-bottom: vw(20) solid #2E8EFF;          border-top: vw(20) solid transparent;          border-left: vw(20) solid transparent;          border-right: vw(20) solid transparent;          content:'';          z-index:2        }
}
</style>