FROM: http://nicolasgallagher.com/pure-css-folded-corner-effect/
代码
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3
4 <head>
5 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
6 <title>Pure CSS folded-corner effect – Nicolas Gallaghe</title>
7 <style type="text/css">
8 /* ------------------------------------------
9 PURE CSS FOLDED CORNER EFFECT
10 by Nicolas Gallagher
11 - http://nicolasgallagher.com/pure-css-folded-corner-effect/
12
13 http://nicolasgallagher.com
14 http://twitter.com/necolas
15
16 Created: 09 December 2010
17 Version: 1.2 (Updated 14 December 2010)
18
19 Dual licensed under MIT and GNU GPLv2 Nicolas Gallagher
20 ------------------------------------------ */
21
22
23 /* ----------------------------------------------------------------------------------------------------------------------------
24 == GENERAL STYLES
25 ** ---------------------------------------------------------------------------------------------------------------------------- */
26
27 html, body {padding:0; margin:0; font:1em/1.4 Cambria, Georgia, sans-serif; color:#333; background:#fff;}
28 header, hgroup {display:block;}
29
30 a:link, a:visited {border-bottom:1px solid #c55500; color:#c55500; text-decoration:none;}
31 a:visited {border-bottom:1px solid #730800; color:#730800;}
32 a:hover, a:focus, a:active {border:0; color:#fff; background:#c55500;}
33 a:visited:hover,
34 a:visited:focus,
35 a:visited:active {color:#fff; background:#730800;}
36
37 .container {width:540px; padding:0 0 10px; margin:0 auto 30px;}
38 .header {border-bottom:1px solid #ddd;}
39 .footer {padding:10px 0 30px; border-top:1px solid #ddd; margin-bottom:0;}
40
41 h1 {margin:1em 0 0; font-size:2.5em; font-weight:normal; line-height:1.2; text-align:center;}
42 h2 {margin:0.5em 0 1.5em; font-size:1.25em; font-weight:normal; font-style:italic; text-align:center;}
43 p {margin:1em 0; line-height:1.4em;}
44
45 pre {margin:1.4em 0; font-size:12px; line-height:1.4em; white-space:pre-wrap; word-wrap:break-word;}
46
47 .follow {clear:both; margin-top:2em; font-size:1.125em;}
48 .follow span {font-weight:bold;}
49
50
51 /* ----------------------------------------------------------------------------------------------------------------------------
52 == FOLDED CORNERS
53 ** ---------------------------------------------------------------------------------------------------------------------------- */
54
55 .note {
56 position:relative;
57 width:480px;
58 padding:1em 1.5em;
59 margin:2em auto;
60 color:#fff;
61 background:#97C02F;
62 overflow:hidden;
63 }
64
65 .note:before {
66 content:"";
67 position:absolute;
68 top:0;
69 right:0;
70 border-width:0 16px 16px 0; /* This trick side-steps a webkit bug */
71 border-style:solid;
72 border-color:#fff #fff #658E15 #658E15; /* A bit more verbose to work with .rounded too */
73 background:#658E15; /* For Opera when also applying a border-radius */
74 display:block; width:0; /* Only for Firefox 3.0 damage limitation */
75 /* Optional: shadow */
76 -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
77 -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
78 box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
79 }
80
81 .note.red {background:#C93213;}
82 .note.red:before {border-color:#fff #fff #97010A #97010A; background:#97010A;}
83
84 .note.blue {background:#53A3B4;}
85 .note.blue:before {border-color:#fff #fff transparent transparent; background:transparent;}
86
87 .note.taupe {background:#999868;}
88 .note.taupe:before {border-color:#fff #fff #BDBB8B #BDBB8B; background:#BDBB8B;}
89
90 /* ROUNDED CORNERS VERSION
91 * All modern browsers can produce this effect with a single pseudo-element.
92 * However, they all have bugs (mainly to do with border-radius) that make this a bit tricky.
93 * As far as I can tell, this is the only cross-browser method for the moment.
94 * Can't use this method for the simple effect because Opera 11 will only show backgrounds
95 * through transparent borders if there is a border-radius applied.
96 */
97
98 .note.rounded {
99 -webkit-border-radius:5px;
100 -moz-border-radius:5px;
101 border-radius:5px;
102 }
103
104 .note.rounded:before {
105 border-width:8px; /* Triggers a 1px 'step' along the diagonal in Safari 5 (and Chrome 10) */
106 border-color:#fff #fff transparent transparent; /* Avoids the 1px 'step' in webkit. Background colour shows through */
107 -webkit-border-bottom-left-radius:5px;
108 -moz-border-radius:0 0 0 5px;
109 border-radius:0 0 0 5px;
110 }
111
112 .note p {margin:0;}
113 .note p + p {margin:1.5em 0 0;}
114 </style>
115 </head>
116
117 <body>
118 <div class="container header">
119 <header>
120 <hgroup>
121 <h1>Pure CSS folded-corner effect</h1>
122 <h2>By <a href="http://nicolasgallagher.com">Nicolas Gallagher</a></h2>
123 </hgroup>
124
125 <p><em>Known support</em>: Firefox 3.5+, Chrome 4+, Safari 4+, Opera 10+, IE 8+.</p>
126 </header>
127 </div>
128
129 <div class="note">
130 <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>
131 <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>
132 </div>
133
134 <div class="note red rounded">
135 <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>
136 </div>
137
138 <div class="note blue">
139 <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>
140 </div>
141
142 <div class="note taupe">
143 <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>
144 </div>
145
146 <div class="container footer">
147 <p>Read the article: <a href="http://nicolasgallagher.com/pure-css-folded-corner-effect/">Pure CSS folded-corner effect</a>.</p>
148 <p class="follow"><a href="http://twitter.com/necolas">You can find me on <span>twitter</span></a>.</p>
149 </div>
150
151 </body>
152
153 </html>
154
2 <html xmlns="http://www.w3.org/1999/xhtml">
3
4 <head>
5 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
6 <title>Pure CSS folded-corner effect – Nicolas Gallaghe</title>
7 <style type="text/css">
8 /* ------------------------------------------
9 PURE CSS FOLDED CORNER EFFECT
10 by Nicolas Gallagher
11 - http://nicolasgallagher.com/pure-css-folded-corner-effect/
12
13 http://nicolasgallagher.com
14 http://twitter.com/necolas
15
16 Created: 09 December 2010
17 Version: 1.2 (Updated 14 December 2010)
18
19 Dual licensed under MIT and GNU GPLv2 Nicolas Gallagher
20 ------------------------------------------ */
21
22
23 /* ----------------------------------------------------------------------------------------------------------------------------
24 == GENERAL STYLES
25 ** ---------------------------------------------------------------------------------------------------------------------------- */
26
27 html, body {padding:0; margin:0; font:1em/1.4 Cambria, Georgia, sans-serif; color:#333; background:#fff;}
28 header, hgroup {display:block;}
29
30 a:link, a:visited {border-bottom:1px solid #c55500; color:#c55500; text-decoration:none;}
31 a:visited {border-bottom:1px solid #730800; color:#730800;}
32 a:hover, a:focus, a:active {border:0; color:#fff; background:#c55500;}
33 a:visited:hover,
34 a:visited:focus,
35 a:visited:active {color:#fff; background:#730800;}
36
37 .container {width:540px; padding:0 0 10px; margin:0 auto 30px;}
38 .header {border-bottom:1px solid #ddd;}
39 .footer {padding:10px 0 30px; border-top:1px solid #ddd; margin-bottom:0;}
40
41 h1 {margin:1em 0 0; font-size:2.5em; font-weight:normal; line-height:1.2; text-align:center;}
42 h2 {margin:0.5em 0 1.5em; font-size:1.25em; font-weight:normal; font-style:italic; text-align:center;}
43 p {margin:1em 0; line-height:1.4em;}
44
45 pre {margin:1.4em 0; font-size:12px; line-height:1.4em; white-space:pre-wrap; word-wrap:break-word;}
46
47 .follow {clear:both; margin-top:2em; font-size:1.125em;}
48 .follow span {font-weight:bold;}
49
50
51 /* ----------------------------------------------------------------------------------------------------------------------------
52 == FOLDED CORNERS
53 ** ---------------------------------------------------------------------------------------------------------------------------- */
54
55 .note {
56 position:relative;
57 width:480px;
58 padding:1em 1.5em;
59 margin:2em auto;
60 color:#fff;
61 background:#97C02F;
62 overflow:hidden;
63 }
64
65 .note:before {
66 content:"";
67 position:absolute;
68 top:0;
69 right:0;
70 border-width:0 16px 16px 0; /* This trick side-steps a webkit bug */
71 border-style:solid;
72 border-color:#fff #fff #658E15 #658E15; /* A bit more verbose to work with .rounded too */
73 background:#658E15; /* For Opera when also applying a border-radius */
74 display:block; width:0; /* Only for Firefox 3.0 damage limitation */
75 /* Optional: shadow */
76 -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
77 -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
78 box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
79 }
80
81 .note.red {background:#C93213;}
82 .note.red:before {border-color:#fff #fff #97010A #97010A; background:#97010A;}
83
84 .note.blue {background:#53A3B4;}
85 .note.blue:before {border-color:#fff #fff transparent transparent; background:transparent;}
86
87 .note.taupe {background:#999868;}
88 .note.taupe:before {border-color:#fff #fff #BDBB8B #BDBB8B; background:#BDBB8B;}
89
90 /* ROUNDED CORNERS VERSION
91 * All modern browsers can produce this effect with a single pseudo-element.
92 * However, they all have bugs (mainly to do with border-radius) that make this a bit tricky.
93 * As far as I can tell, this is the only cross-browser method for the moment.
94 * Can't use this method for the simple effect because Opera 11 will only show backgrounds
95 * through transparent borders if there is a border-radius applied.
96 */
97
98 .note.rounded {
99 -webkit-border-radius:5px;
100 -moz-border-radius:5px;
101 border-radius:5px;
102 }
103
104 .note.rounded:before {
105 border-width:8px; /* Triggers a 1px 'step' along the diagonal in Safari 5 (and Chrome 10) */
106 border-color:#fff #fff transparent transparent; /* Avoids the 1px 'step' in webkit. Background colour shows through */
107 -webkit-border-bottom-left-radius:5px;
108 -moz-border-radius:0 0 0 5px;
109 border-radius:0 0 0 5px;
110 }
111
112 .note p {margin:0;}
113 .note p + p {margin:1.5em 0 0;}
114 </style>
115 </head>
116
117 <body>
118 <div class="container header">
119 <header>
120 <hgroup>
121 <h1>Pure CSS folded-corner effect</h1>
122 <h2>By <a href="http://nicolasgallagher.com">Nicolas Gallagher</a></h2>
123 </hgroup>
124
125 <p><em>Known support</em>: Firefox 3.5+, Chrome 4+, Safari 4+, Opera 10+, IE 8+.</p>
126 </header>
127 </div>
128
129 <div class="note">
130 <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>
131 <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>
132 </div>
133
134 <div class="note red rounded">
135 <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>
136 </div>
137
138 <div class="note blue">
139 <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>
140 </div>
141
142 <div class="note taupe">
143 <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>
144 </div>
145
146 <div class="container footer">
147 <p>Read the article: <a href="http://nicolasgallagher.com/pure-css-folded-corner-effect/">Pure CSS folded-corner effect</a>.</p>
148 <p class="follow"><a href="http://twitter.com/necolas">You can find me on <span>twitter</span></a>.</p>
149 </div>
150
151 </body>
152
153 </html>
154