纯css3实现的折角效果没有使用图片和js代码

时间：2013-08-15 09:03 来源：互联网作者：源码搜藏浏览：次收藏挑错推荐打印

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯css3实现的折角效果</title>
<style>
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;
}
</style>
<script>
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);
        })();
    </script>
</head>
<body>
<div class="note">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.</p>
</div>
<div class="note red rounded">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.</p>
</div>
<div class="note blue">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.</p>
</div>
<div class="note taupe">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.</p>
</div>
</body>
</html>

纯css3实现的折角效果没有使用图片和js代码

网页特效