缎带css代码,使用CSS分别实现的缎带和横幅

CSS

语言：

CSSSCSS

确定

/* =========

Get Fonts */

@import url(http://fonts.googleapis.com/css?family=Quicksand);

/* ================

Assign Variables */

/* ===========================

Setup Mixins/Helper Classes */

.clearfix:after {

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;

}

/* ==========

Setup Page */

*,

*:before,

*:after {

box-sizing: border-box;

}

body {

padding: 3em;

background-image: url(http://subtlepatterns.com/patterns/retina_wood.png);

color: grey;

font-family: 'Quicksand', sans-serif;

}

section {

background: white;

padding: 2em;

border-radius: .5em;

}

section .ribbon,

section .banner {

margin: 0 -1em 1em -1em;

position: relative;

}

section .ribbon span,

section .banner span {

display: block;

display: absolute;

background: #6EB590;

padding: 0 1em 0 1em;

margin: 0 -.25em 0 -.25em;

border-radius: .0625em .0625em 0 0;

color: #fff;

}

section .ribbon span:before,

section .ribbon span:after,

section .banner span:before,

section .banner span:after {

display: block;

position: absolute;

content: '';

width: 0;

height: 0;

border: .125em solid transparent;

}

section .ribbon span:before,

section .banner span:before {

border-top-color: #519f76;

border-right-color: #519f76;

bottom: -.25em;

left: -.25em;

}

section .ribbon span:after,

section .banner span:after {

border-top-color: #519f76;

border-left-color: #519f76;

bottom: -.25em;

right: -.25em;

}

section .ribbon:before,

section .ribbon:after,

section .banner:before,

section .banner:after {

display: block;

position: absolute;

content: '';

}

section .ribbon:after,

section .banner:after {

width: 100%;

height: .125em;

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

bottom: -.125em;

left: 0;

}

section .ribbon:before {

z-index: -1;

width: 0;

height: 0;

border: .5em solid transparent;

border-top-color: #5dac83;

border-right-color: #5dac83;

border-bottom-color: #5dac83;

bottom: -.25em;

left: -1em;

}