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;

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-ms-transform: rotate(45deg);

-o-transform: rotate(45deg);

position: relative;

padding: 2px 0;

left: 35px;

top: 10px;

width: 65px;

background-color: #00801C;

background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));

background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);

background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45);

background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45);

background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45);

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

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

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

}

.box .box-text:before, .box-text:after {

content: "";

position: absolute;

bottom: -3px;

}

.box .box-text:before {

left: 0;

}

.box .box-text:after {

right: 0;

}