<div class="box"> <div class="box-con"> <div class="box-text">昨日</div> </div> </div>
CSS
.box { width: 180px; height: 100px; 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; }