html图片实现丝带效果,html+css做的丝带标签

先上效果：

HTML:

2016.05.24

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;

}