Pure CSS folded-corner effect(IE8以上,其他瀏覽器可以)
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
哲学管理(学)人生, 文学艺术生活, 自动(计算机学)物理(学)工作, 生物(学)化学逆境, 历史(学)测绘(学)时间, 经济(学)数学金钱(理财), 心理(学)医学情绪, 诗词美容情感, 美学建筑(学)家园, 解构建构(分析)整合学习, 智商情商(IQ、EQ)运筹(学)生存.---Geovin Du(涂聚文）
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！