html图片实现丝带效果,CSS3前端开发动态网站_丝带效果

/p>

<

CSS3：前端网页开发实现丝带效果

/*body {margin:0;font-family: ‘Ubuntu’, sans-serif;}*/

section{

margin:0auto;

max-width:660px;

padding:020px

}

h2{

font-weight:normal;

position:relative;

background:#F4F9FA;

width:50%;

color:#F8463F;

text-align:center;

padding:10px20px;

margin:20pxauto40px;

text-transform:uppercase;

border-radius:2px;

}

h2:before,

h2:after{

content:””;

position:absolute;

display:block;

top:-6px;

border:18pxsolid#DCF4F4;

}

h2:before{

left:-36px;

border-right-width:18px;

border-left-color:transparent;

}

h2:after{

right:-36px;

border-left-width:18px;

border-right-color:transparent;

}

h2span:before,

h2span:after{

content:””;

position:absolute;

display:block;

border-style:solid;

border-color:#A7CECCtransparenttransparenttransparent;

top:-6px;

-webkit-transform:rotate(180deg);

-ms-transform:rotate(180deg);

-o-transform:rotate(180deg);

transform:rotate(180deg);

}

h2span:before{

left:0;

border-width:6px006px;

}

h2span:after{

right:0;

border-width:6px6px00;

}

.ribbon{

display:inline-block;

width:48%;

height:188px;

position:relative;

float:left;

margin-bottom:30px;

background:url(../snow-road.jpg);

background-size:cover;

text-transform:uppercase;

color:white;

}

.ribbon:nth-child(even){

margin-right:4%;

}

@media(max-width:500px){

.ribbon{

width:100%

}

.ribbon:nth-child(even){

margin-right:0%;

}

}

.ribbon1{

position:absolute;

top:-6px;

right:10px;

}

.ribbon1:after{

position:absolute;

content:””;

display:block;

width:0;

height:0;

border-left:53pxsolidtransparent;

border-right:53pxsolidtransparent;

border-top:10pxsolid#F8463F;

}

.ribbon1span{

position:relative;

display:inline-block;

text-align:center;

background:#F8463F;

font-size:14px;

line-height:1;

padding:12px8px10px;

border-top-right-radius:8px;

width:90px;

}

.ribbon1span:before,

.ribbon1span:after{

position:absolute;

content:””;

display:block;

}

.ribbon1span:before{

background:#F8463F;

height:6px;

width:6px;

left:-6px;

top:0;

}

.ribbon1span:after{

background:#C02031;

height:6px;

width:8px;

border-radius:8px8px00;

left:-8px;

top:0;

}

.ribbon2{

display:inline-block;

width:60px;

padding:10px0;

background:#F47530;

top:-6px;

left:25px;

position:absolute;

text-align:center;

border-top-left-radius:3px;

}

.ribbon2:before{

height:0;

width:0;

border-bottom:6pxsolid#8D5A20;

border-right:6pxsolidtransparent;

right:-6px;

top:0;

}

.ribbon2:before,

.ribbon2:after{

content:””;

position:absolute;

}

.ribbon2:after{

height:0;

width:0;

border-left:30pxsolid#F47530;

border-right:30pxsolid#F47530;

border-bottom:30pxsolidtransparent;

bottom:-30px;

left:0;

}

.ribbon3{

display:inline-block;

position:absolute;

width:150px;

height:50px;

line-height:50px;

padding-left:15px;

background:#59324C;

left:-8px;

top:20px

}

.ribbon3:before,

.ribbon3:after{

content:””;

position:absolute;

}

.ribbon3:before{

height:0;

width:0;

border-bottom:8pxsolidblack;

border-left:8pxsolidtransparent;

top:-8px;

left:0;

}

.ribbon3:after{

height:0;

width:0;

border-top:25pxsolidtransparent;

border-bottom:25pxsolidtransparent;

border-left:15pxsolid#59324C;

right:-15px;

}

.ribbon4{

position:absolute;

top:15px;

padding:8px10px;

background:#00B3ED;

box-shadow:-1px2px4pxrgba(0,0,0,0.5);

}

.ribbon4:before,

.ribbon4:after{

position:absolute;

content:””;

display:block;

}

.ribbon4:before{

width:7px;

height:100%;

padding:007px;

top:0;

left:-7px;

background:inherit;

border-radius:5px005px;

}

.ribbon4:after{

width:5px;

height:5px;

background:rgba(0,0,0,0.35);

bottom:-5px;

left:-5px;

border-radius:5px005px;

}

.ribbon5{

display:inline-block;

width:calc(100%+20px);

height:50px;

line-height:50px;

text-align:center;

margin-left:-10px;

margin-right:-10px;

background:#EDBA19;

position:relative;

top:20px;

}

.ribbon5:before{

content:””;

position:absolute;

height:0;

width:0;

border-top:10pxsolid#cd8d11;

border-left:10pxsolidtransparent;

bottom:-10px;

left:0;

}

.ribbon5:after{

content:””;

position:absolute;

height:0;

width:0;

border-top:10pxsolid#cd8d11;

border-right:10pxsolidtransparent;

right:0;

bottom:-10px;

}

.wrap{

width:100%;

height:188px;

position:absolute;

top:-8px;

left:8px;

overflow:hidden;

}

.wrap:before{

content:””;

display:block;

border-radius:8px8px0px0px;

width:40px;

height:8px;

position:absolute;

right:100px;

background:#4D6530;

}

.wrap:after{

content:””;

display:block;

border-radius:0px8px8px0px;

width:8px;

height:40px;

position:absolute;

right:0px;

top:100px;

background:#4D6530;

}

.ribbon6{

display:inline-block;

text-align:center;

width:200px;

height:40px;

line-height:40px;

position:absolute;

top:30px;

right:-50px;

z-index:2;

overflow:hidden;

transform:rotate(45deg);

-ms-transform:rotate(45deg);

-moz-transform:rotate(45deg);

-webkit-transform:rotate(45deg);

-o-transform:rotate(45deg);

border:1pxdashed;

box-shadow:0003px#57DD43,0px21px5px-18pxrgba(0,0,0,0.6);

background:#57DD43;

}

丝带效果1