带阴影的倒三角

.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;
      }
    }

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值