純css3實現的折角效果(無需圖片和js代碼)

2024-09-05 12:18:50

字體：大中小

來源：轉載

供稿：網友

4種風格的CSS3折角效果，紙張折角，無需圖片和js代碼，四種顏色折角的示例代碼，希望大家喜歡。

<!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   id="iwvjtn8m0"   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   id="iwvjtn8m0"   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   id="iwvjtn8m0"   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   id="iwvjtn8m0"   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網頁開關-Switches代碼

下一篇：html5的canvas特性:三國殺版連連看代碼