纯css3实现的折角效果(无需图片和js代码)

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!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>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

纯css3实现的折角效果(无需图片和js代码)

分类

CSS3

描述

4种风格的CSS3折角效果，纸张折角，无需图片和js代码，四种颜色折角的示例代码，希望大家喜欢。