微信小程序css画三角形内有文字

时间:2019-01-20 11:45:58   收藏:0   阅读:999
<view class="productStatus">
  <span>
    <em>已上架</em>
  </span>
</view>

  

.productStatus {
  position: absolute;
  right: 0;
  top: 0;
  height: 1.81rem;
  width: 1.81rem;
  display: flex;
  align-items: center;
}

.productStatus span {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-top: 1.81rem solid #81d8d0;
  border-left: 1.81rem solid transparent;
}

.productStatus em {
  position: absolute;
  top: -1.8rem;
  right: 0rem;
  height: 1.27rem;
  width: 1.27rem;
  line-height: 1.2rem;
  text-align: center;
  font-size: 0.29rem;
  color: #fff;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

  

评论(0
© 2014 mamicode.com 版权所有 京ICP备13008772号-2  联系我们:gaon5@hotmail.com
迷上了代码!