css实现书角标签效果

  在小程序项目开发过程中，UI给的原型图效果是这样的。

  接下来直接上干货

html代码

<view class="box">

<view class="box-con">

<view class="box-text">{ {tabs[0]}}</view>

</view>

</view>​

  css代码

.box {

background: white;

border-radius: 10px;

-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);

-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);

box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);

position: relative;

z-index: 90;

}

.box .box-con{

width: 85px;

height: 88px;

overflow: hidden;

position: absolute;

top: -3px;

right: -3px;

}

.box .box-text {

color: white;

text-align: center;