纯css3实现的折角效果

html, body {

padding: 0;

margin: 0;

font: 1em/1.4 Cambria, Georgia, sans-serif;

color: #333;

background: #fff;

}

header, hgroup {

display: block;

}

a: link, a: visited {

border-bottom: 1px solid #c55500;

color: #c55500;

text-decoration: none;

}

a: visited {

border-bottom: 1px solid #730800;

color: #730800;

}

a: hover, a: focus, a: active {

border: 0;

color: #fff;

background: #c55500;

}

a: visited: hover, a: visited: focus, a: visited: active {

color: #fff;

background: #730800;

}

.container {

width: 540px;

padding: 0 0 10px;

margin: 0 auto 30px;

}

.header {

border-bottom: 1px solid #ddd;

}

.footer {

padding: 10px 0 30px;

border-top: 1px solid #ddd;

margin-bottom: 0;

}

h1 {

margin: 1em 0 0;

font-size: 2.5em;

font-weight: normal;

line-height: 1.2;

text-align: center;

}

h2 {

margin: 0.5em 0 1.5em;

font-size: 1.25em;

font-weight: normal;

font-style: italic;

text-align: center;

}

p {

margin: 1em 0;

line-height: 1.4em;

}

pre {

margin: 1.4em 0;

font-size: 12px;

line-height: 1.4em;

white-space: pre-wrap;

word-wrap: break-word;

}

.follow {

clear: both;

margin-top: 2em;

font-size: 1.125em;

}

.follow span {

font-weight: bold;

}

.note {

position: relative;

width: 480px;

padding: 1em 1.5em;

margin: 2em auto;

color: #fff;

background: #97C02F;

overflow: hidden;

}

.note: before {

content: "";

position: absolute;

top: 0;

right: 0;

border-width: 0 16px 16px 0;

border-style: solid;

border-color: #fff #fff #658E15 #658E15;

background: #658E15;

display: block;

width: 0;

/* Optional: shadow*/

-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);

-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);

box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);

}

.note.red {

background: #C93213;

}

.note.red: before {

border-color: #fff #fff #97010A #97010A;

background: #97010A;

}

.note.blue {

background: #53A3B4;

}

.note.blue: before {

border-color: #fff #fff transparent transparent;

background: transparent;

}

.note.taupe {

background: #999868;

}

.note.taupe: before {

border-color: #fff #fff #BDBB8B #BDBB8B;

background: #BDBB8B;

}

.note.rounded {

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

}

.note.rounded: before {

border-width: 8px;

border-color: #fff #fff transparent transparent;

-webkit-border-bottom-left-radius: 5px;

-moz-border-radius: 0 0 0 5px;

border-radius: 0 0 0 5px;

}

.note p {

margin: 0;

}

.note p + p {

margin: 1.5em 0 0;

}

var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-7489188-1']); _gaq.push(['_trackPageview']);

(function() {

var ga = document.createElement('script'); ga.async = true; ga.src = 'http://www.google-analytics.com/ga.js';

var s = document.getElementsByTagName('script')[0];

s.parentNode.insertBefore(ga, s);

})();