缎带css代码,CSS3 获奖缎带

CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=Mountains+of+Christmas:700);

* {

margin: 0px;

padding: 0px;

}

html {

min-height: 100%;

}

body {

min-height: 100%;

background: #a90329;

background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a90329), color-stop(44%, #8f0222), color-stop(100%, #6d0019));

background: -webkit-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%);

background: -o-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%);

background: -ms-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%);

background: linear-gradient(to bottom, #a90329 0%, #8f0222 44%, #6d0019 100%);

filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#a90329', endColorstr='#6d0019', GradientType=0);

}

.ribbon {

display: block;

width: 200px;

margin: 30px auto 0 auto;

padding: 15px 20px;

position: relative;

font-family: 'Mountains of Christmas', cursive;

font-size: 32px;

text-align: center;

-moz-box-shadow: 6px 6px 25px 0px #000;

-webkit-box-shadow: 6px 6px 25px 0px #000;

box-shadow: 6px 6px 25px 0px #000;

background: #f6e6b4;

background: -moz-linear-gradient(top, #f6e6b4 0%, #eab779 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f6e6b4), color-stop(100%, #eab779));

background: -webkit-linear-gradient(top, #f6e6b4 0%, #eab779 100%);

background: -o-linear-gradient(top, #f6e6b4 0%, #eab779 100%);

background: -ms-linear-gradient(top, #f6e6b4 0%, #eab779 100%);

background: linear-gradient(to bottom, #f6e6b4 0%, #eab779 100%);

filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f6e6b4', endColorstr='#eab779', GradientType=0);

}

.ribbon:after {

content: " ";

display: block;

position: absolute;

width: 240px;

bottom: -20px;

left: 0px;

height: 30px;

background: linear-gradient(-45deg, transparent 75%, #eab779 75%) 0 50%, linear-gradient(45deg, transparent 75%, #eab779 75%) 0 50%;

background: -moz-linear-gradient(135deg, transparent 75%, #eab779 75%) 0 50%, -moz-linear-gradient(45deg, transparent 75%, #eab779 75%) 0 50%;

background: -webkit-linear-gradient(135deg, transparent 75%, #eab779 75%) 0 50%, -webkit-linear-gradient(45deg, transparent 75%, #eab779 75%) 0 50%;

background-repeat: repeat-x;

background-size: 10px 12px, 10px 10px;

}

.ribbon:before {

content: " ";

display: block;

position: absolute;

width: 240px;

top: -20px;

left: 0px;

height: 30px;

background: linear-gradient(135deg, transparent 75%, #f6e6b4 75%) 0 50%, linear-gradient(-135deg, transparent 75%, #f6e6b4 75%) 0 50%;

background: -moz-linear-gradient(-135deg, transparent 75%, #f6e6b4 75%) 0 50%, -moz-linear-gradient(-45deg, transparent 75%, #f6e6b4 75%) 0 50%;

background: -webkit-linear-gradient(-135deg, transparent 75%, #f6e6b4 75%) 0 50%, -webkit-linear-gradient(-45deg, transparent 75%, #f6e6b4 75%) 0 50%;

background-repeat: repeat-x;

background-size: 10px 12px, 10px 10px;

}