html+css做的丝带标签

先上效果：

HTML:

　　<div class="tag">

　　　　<div class="tag-box">

　　　　　　<div class="tag-content-box">

　　　　　　　　<div class="tag-content">

　　　　　　　　　　<span class="tag-content-line"></span>

　　　　　　　　　　<span class="tag-content-text"> 2016.05.24 </span>

　　　　　　　　</div>
　　　　　　　　<div class="tag-tail top"></div>

　　　　　　　　<div class="tag-tail bottom"></div>

　　　　　　　　<div class="tag-tail below"></div>

　　　　　　</div>

　　　　</div>

　　</div>

CSS:

　　.tag {

　　　　　　width: 100%;

　　　　　　border-right: 1px solid #DDD;

　　　　　　-moz-border-radius: 4px 0px 0px 4px;

　　　　　　-webkit-border-radius: 4px 0px 0px 4px;

　　　　　　border-radius: 4px 0px 0px 4px;

　　　　　　float: left;

　　　　　　clear: both;

　　　　　　margin: 30px 0;

　　　　}

　　.tag-box {

　　　　　　width: 100%;

　　　　　　height: 50px;

　　　　　　position: relative

　　　　}

　　.tag-content-box {

　　　　　　position: absolute;

　　　　　　color: #792f2f;

　　　　　　top: 16px;

　　　　　　left: 6px;

　　　　　　border-left: solid 6px #f0807b;

　　　　}

　　.tag-content {

　　　　　　font-size: 14px;

　　　　　　line-height: 20px;

　　　　　　height: 20px;

　　　　　　padding: 5px 15px 5px 17px;

　　　　　　color: #ffffff!important;

　　　　　　background: rgba(255, 126, 121, 0.5);

　　　　}

　　.tag-content-line {

　　　　　　border-left: solid 1px #fff;

　　　　　　position: absolute;

　　　　　　padding: 100% 0;

　　　　　　left: 0;

　　　　　　top: 0;

　　　　}

　　.tag-content-text {

　　　　　　text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.59);

　　　　}

　　.tag-tail {

　　　　　　width: 0;

　　　　　　height: 0;

　　　　　　border-left: 16px solid rgba(240, 128, 123, 0.74);

　　　　　　border-right: 0 none;

　　　　　　position: absolute;

　　　　　　right: -14px;

　　　　　　border-left-color: rgba(240, 128, 123, 0.74);

　　　　}

　　.tag-tail.top {

　　　　　　border-top: 0 solid transparent;

　　　　　　border-bottom: 16px solid transparent;

　　　　　　top: 0;

　　　　}

　　.tag-tail.bottom {

　　　　　　border-top: 16px solid transparent;

　　　　　　border-bottom: 0 solid transparent;

　　　　　　bottom: 0;

　　　　}

　　.tag-tail.below {

　　　　　　border-top: 0px solid transparent;

　　　　　　border-bottom: 10px solid transparent;

　　　　　　border-left: 0px solid transparent;

　　　　　　border-right: 6px solid #d15952;

　　　　　　top: 100%;

　　　　　　left: -6px;

　　　　}