css3 彩带扩散效果_css3丝带效果

CSS3丝带效果

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

section {margin:0 auto; max-width:660px;padding: 0 20px}

h2 {

font-weight: normal;

position: relative;

background: #F4F9FA;

width: 50%;

color: #F8463F;

text-align: center;

padding: 10px 20px;

margin: 20px auto 40px;

text-transform: uppercase;

border-radius: 2px;

}

h2:before, h2:after {

content: "";

position: absolute;

display: block;

top: -6px;

border: 18px solid #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;

}

h2 span:before, h2 span:after {

content: "";

position: absolute;

display: block;

border-style: solid;

border-color: #A7CECC transparent transparent transparent;

top: -6px;

-webkit-transform: rotate(180deg);

-ms-transform: rotate(180deg);

-o-transform: rotate(180deg);

transform: rotate(180deg);

}

h2 span:before {

left: 0;

border-width: 6px 0 0 6px;

}

h2 span:after {

right: 0;

border-width: 6px 6px 0 0;

}

.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: 53px solid transparent;

border-right: 53px solid transparent;

border-top: 10px solid #F8463F;

}

.ribbon1 span {

position: relative;

display: inline-block;

text-align: center;

background: #F8463F;

font-size: 14px;

line-height: 1;

padding: 12px 8px 10px;

border-top-right-radius: 8px;

width: 90px;

}

.ribbon1 span:before, .ribbon1 span:after {

position: absolute;

content: "";

display: block;

}

.ribbon1 span:before {

background: #F8463F;

height: 6px;

width: 6px;

left: -6px;

top: 0;

}

.ribbon1 span:after {

background: #C02031;

height: 6px;

width: 8px;

border-radius: 8px 8px 0 0;

left: -8px;

top: 0;

}

.ribbon2 {

display: inline-block;

width: 60px;

padding: 10px 0;

background: #F47530;

top: -6px;

left: 25px;

position: absolute;

text-align: center;

border-top-left-radius: 3px;

}

.ribbon2:before {

height: 0;

width: 0;

border-bottom: 6px solid #8D5A20;

border-right: 6px solid transparent;

right: -6px;

top: 0;

}

.ribbon2:before, .ribbon2:after {

content: "";

position: absolute;

}

.ribbon2:after {

height: 0;

width: 0;

border-left: 30px solid #F47530;

border-right: 30px solid #F47530;

border-bottom: 30px solid transparent;

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: 8px solid black;

border-left: 8px solid transparent;

top: -8px;

left: 0;

}

.ribbon3:after {

height: 0;

width: 0;

border-top: 25px solid transparent;

border-bottom: 25px solid transparent;

border-left: 15px solid #59324C;

right: -15px;

}

.ribbon4 {

position: absolute;

top: 15px;

padding: 8px 10px;

background: #00B3ED;

box-shadow: -1px 2px 4px rgba(0,0,0,0.5);

}

.ribbon4:before, .ribbon4:after {

position: absolute;

content: "";

display: block;

}

.ribbon4:before {

width: 7px;

height: 100%;

padding: 0 0 7px;

top: 0;

left: -7px;

background: inherit;

border-radius: 5px 0 0 5px;

}

.ribbon4:after {

width: 5px;

height: 5px;

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

bottom: -5px;

left: -5px;

border-radius: 5px 0 0 5px;

}

.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: 10px solid #cd8d11;

border-left: 10px solid transparent;

bottom: -10px;

left: 0;

}

.ribbon5:after {

content: "";

position: absolute;

height: 0;

width: 0;

border-top: 10px solid #cd8d11;

border-right: 10px solid transparent;

right: 0;

bottom: -10px;

}

.wrap {

width: 100%;

height: 188px;

position: absolute;

top: -8px;

left: 8px;

overflow: hidden;

}

.wrap:before {

content: "";

display: block;

border-radius: 8px 8px 0px 0px;

width: 40px;

height: 8px;

position: absolute;

right: 100px;

background: #4D6530;

}

.wrap:after {

content: "";

display: block;

border-radius: 0px 8px 8px 0px;

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: 1px dashed;

box-shadow:0 0 0 3px #57DD43, 0px 21px 5px -18px rgba(0,0,0,0.6);

background: #57DD43;

}

丝带效果1

丝
带
效
果
2

丝带效果3

丝带效果4

丝带效果5

丝带效果6