带阴影的倒三角

.titlebg{
      padding:0/@rem 50/@rem 0/@rem 20/@rem;
      margin: 10/@rem;
      box-shadow:0/@rem 0/@rem 10/@rem 0/@rem rgba(0,0,0,0.2);
      border-radius: 10/@rem;
      float: left;
      line-height: 92/@rem;
      height: 92/@rem;
      font-weight:600;
      color:rgba(51,51,51,1);
      font-size: 36/@rem;
      font-family: @ff;
      position: relative;
      background: #fff;
      &::before{
        content: "";
        display:block;
        width:15/@rem;
        height:15/@rem;
        background: #fff;
        box-shadow: 0/@rem 0/@rem 10/@rem 0/@rem rgba(0,0,0,0.2);
        position:absolute;
        top:36/@rem;
        left:-7/@rem;
        transform: rotateZ(45deg);
        transform-origin: center center;
      }
      &::after{
        content: "";
        display:block;
        width:20/@rem;
        height:40/@rem;
        background: #fff;
        position:absolute;
        top:20/@rem;
        left:0/@rem;
      }
    }

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_38402659/article/details/88790214