CSS3圆角气泡框，评论对话框

kevin-ying

1. <title>CSS3圆角气泡框，评论对话框</title>
   
2. <style>
   
3. body {
   
4.     padding:0;
   
5.     margin:0;
   
6.     font:1em/1.4 Cambria, Georgia, sans-serif;
   
7.     color:#333;
   
8.     background:#fff;
   
9. }
   
10. a:link,
    
11. a:visited {
    
12.     border-bottom:1px solid #c55500;
    
13.     text-decoration:none;
    
14.     color:#c55500;
    
15. }
    
16. a:visited {
    
17.     border-bottom:1px solid #730800;
    
18.     color:#730800;
    
19. }
    
20. a:hover,
    
21. a:focus,
    
22. a:active {
    
23.     border:0;
    
24.     color:#fff;
    
25.     background:#c55500;
    
26. }
    
27. a:visited:hover,
    
28. a:visited:focus,
    
29. a:visited:active {
    
30.     color:#fff;
    
31.     background:#730800;
    
32. }
    
33. #container {
    
34.     width:500px;
    
35.     padding:0 0 50px;
    
36.     margin:0 auto;
    
37. }
    
38. h1 {
    
39.     margin:1em 0 0;
    
40.     font-size:2.5em;
    
41.     font-weight:normal;
    
42.     line-height:1.2;
    
43.     text-align:center;
    
44. }
    
45. h2 {
    
46.     margin:0.5em 0 1.5em;
    
47.     font-size:1.25em;
    
48.     font-weight:normal;
    
49.     font-style:italic;
    
50.     text-align:center;
    
51. }
    
52. p {
    
53.     margin:1em 0;
    
54. }
    
55. .content h2 {
    
56.     margin:2em 0 0.75em;
    
57.     font-size:2em;
    
58.     font-weight:bold;
    
59.     font-style:normal;
    
60.     text-align:left;
    
61. }
    
62. blockquote {
    
63.     margin:1em 0;
    
64. }
    
65. blockquote p {
    
66.     margin:0;
    
67.     font-size:2em;
    
68. }
    
69. .follow {
    
70.     clear:both;
    
71.     margin-top:2em;
    
72.     font-size:1.125em;
    
73. }
    
74. .follow span {
    
75.     font-weight:bold;
    
76. }
    
77. .content {
    
78.     position:relative;
    
79.     z-index:1;
    
80. }
    
81. .triangle-isosceles {
    
82.         position:relative;
    
83.         padding:15px;
    
84.         margin:1em 0 3em;
    
85.         color:#000;
    
86.         background:#f3961c; /* default background for browsers without gradient support */
    
87.         background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
    
88.         background:-moz-linear-gradient(#f9d835, #f3961c);
    
89.         background:-o-linear-gradient(#f9d835, #f3961c);
    
90.         background:linear-gradient(#f9d835, #f3961c);
    
91.         -webkit-border-radius:10px;
    
92.         -moz-border-radius:10px;
    
93.         border-radius:10px;
    
94. }
    
95. .triangle-isosceles.top {
    
96.         background:-webkit-gradient(linear, 0 0, 0 100%, from(#f3961c), to(#f9d835));
    
97.         background:-moz-linear-gradient(#f3961c, #f9d835);
    
98.         background:-o-linear-gradient(#f3961c, #f9d835);
    
99.         background:linear-gradient(#f3961c, #f9d835);
    
100. }
     
101. .triangle-isosceles.left {
     
102.         margin-left:50px;
     
103.         background:#f3961c;
     
104. }
     
105. .triangle-isosceles.right {
     
106.         margin-right:50px;
     
107.         background:#f3961c;
     
108. }
     
109. .triangle-isosceles:after {
     
110.         content:"";
     
111.         position:absolute;
     
112.         bottom:-15px;
     
113.         left:50px;
     
114.         border-width:15px 15px 0;
     
115.         border-style:solid;
     
116.         border-color:#f3961c transparent;
     
117.     display:block;
     
118.     width:0;
     
119. }
     
120. .triangle-isosceles.top:after {
     
121.         top:-15px;
     
122.         right:50px;
     
123.         bottom:auto;
     
124.         left:auto;
     
125.         border-width:0 15px 15px;
     
126.         border-color:#f3961c transparent;
     
127. }
     
128. .triangle-isosceles.left:after {
     
129.         top:16px;
     
130.         left:-50px;
     
131.         bottom:auto;
     
132.         border-width:10px 50px 10px 0;
     
133.         border-color:transparent #f3961c;
     
134. }
     
135. .triangle-isosceles.right:after {
     
136.         top:16px; /* controls vertical position */
     
137.         right:-50px;
     
138.         bottom:auto;
     
139.     left:auto;
     
140.         border-width:10px 0 10px 50px;
     
141.         border-color:transparent #f3961c;
     
142. }
     
143. .triangle-right {
     
144.         position:relative;
     
145.         padding:15px;
     
146.         margin:1em 0 3em;
     
147.         color:#fff;
     
148.         background:#075698;
     
149.         /* css3 */
     
150.         background:-webkit-gradient(linear, 0 0, 0 100%, from(#2e88c4), to(#075698));
     
151.         background:-moz-linear-gradient(#2e88c4, #075698);
     
152.         background:-o-linear-gradient(#2e88c4, #075698);
     
153.         background:linear-gradient(#2e88c4, #075698);
     
154.         -webkit-border-radius:10px;
     
155.         -moz-border-radius:10px;
     
156.         border-radius:10px;
     
157. }
     
158. .triangle-right.top {
     
159.         background:-webkit-gradient(linear, 0 0, 0 100%, from(#075698), to(#2e88c4));
     
160.         background:-moz-linear-gradient(#075698, #2e88c4);
     
161.         background:-o-linear-gradient(#075698, #2e88c4);
     
162.         background:linear-gradient(#075698, #2e88c4);
     
163. }
     
164. .triangle-right.left {
     
165.         margin-left:40px;
     
166.         background:#075698;
     
167. }
     
168. .triangle-right.right {
     
169.         margin-right:40px;
     
170.         background:#075698;
     
171. }
     
172. .triangle-right:after {
     
173.         content:"";
     
174.         position:absolute;
     
175.         bottom:-20px; /* value = - border-top-width - border-bottom-width */
     
176.         left:50px; /* controls horizontal position */
     
177.         border-width:20px 0 0 20px; /* vary these values to change the angle of the vertex */
     
178.         border-style:solid;
     
179.         border-color:#075698 transparent;
     
180.     display:block;
     
181.     width:0;
     
182. }
     
183. .triangle-right.top:after {
     
184.         top:-20px; /* value = - border-top-width - border-bottom-width */
     
185.         right:50px; /* controls horizontal position */
     
186.         bottom:auto;
     
187.         left:auto;
     
188.         border-width:20px 20px 0 0; /* vary these values to change the angle of the vertex */
     
189.         border-color:transparent #075698;
     
190. }
     
191. .triangle-right.left:after {
     
192.         top:16px;
     
193.         left:-40px; /* value = - border-left-width - border-right-width */
     
194.         bottom:auto;
     
195.         border-width:15px 40px 0 0; /* vary these values to change the angle of the vertex */
     
196.         border-color:transparent #075698;
     
197. }
     
198. .triangle-right.right:after {
     
199.         top:16px;
     
200.         right:-40px; /* value = - border-left-width - border-right-width */
     
201.         bottom:auto;
     
202.     left:auto;
     
203.         border-width:15px 0 0 40px; /* vary these values to change the angle of the vertex */
     
204.         border-color:transparent #075698 ;
     
205. }
     
206. .triangle-obtuse {
     
207.         position:relative;
     
208.         padding:15px;
     
209.         margin:1em 0 3em;
     
210.         color:#fff;
     
211.         background:#c81e2b;
     
212.         /* css3 */
     
213.         background:-webkit-gradient(linear, 0 0, 0 100%, from(#f04349), to(#c81e2b));
     
214.         background:-moz-linear-gradient(#f04349, #c81e2b);
     
215.         background:-o-linear-gradient(#f04349, #c81e2b);
     
216.         background:linear-gradient(#f04349, #c81e2b);
     
217.         -webkit-border-radius:10px;
     
218.         -moz-border-radius:10px;
     
219.         border-radius:10px;
     
220. }
     
221. .triangle-obtuse.top {
     
222.         background:-webkit-gradient(linear, 0 0, 0 100%, from(#c81e2b), to(#f04349));
     
223.         background:-moz-linear-gradient(#c81e2b, #f04349);
     
224.         background:-o-linear-gradient(#c81e2b, #f04349);
     
225.         background:linear-gradient(#c81e2b, #f04349);
     
226. }
     
227. .triangle-obtuse.left {
     
228.         margin-left:50px;
     
229.         background:#c81e2b;
     
230. }
     
231. .triangle-obtuse.right {
     
232.         margin-right:50px;
     
233.         background:#c81e2b;
     
234. }
     
235. .triangle-obtuse:before {
     
236.         content:"";
     
237.         position:absolute;
     
238.         bottom:-20px; /* value = - border-top-width - border-bottom-width */
     
239.         left:60px; /* controls horizontal position */
     
240.         border:0;
     
241.         border-right-width:30px; /* vary this value to change the angle of the vertex */
     
242.         border-bottom-width:20px; /* vary this value to change the height of the triangle. must be equal to the corresponding value in :after */
     
243.         border-style:solid;
     
244.         border-color:transparent #c81e2b;
     
245.     /* reduce the damage in FF3.0 */
     
246.     display:block;
     
247.     width:0;
     
248. }
     
249. .triangle-obtuse:after {
     
250.         content:"";
     
251.         position:absolute;
     
252.         bottom:-20px; /* value = - border-top-width - border-bottom-width */
     
253.         left:80px; /* value = (:before's left) + (:before's border-right/left-width)  - (:after's border-right/left-width) */
     
254.         border:0;
     
255.         border-right-width:10px; /* vary this value to change the angle of the vertex */
     
256.         border-bottom-width:20px; /* vary this value to change the height of the triangle. must be equal to the corresponding value in :before */
     
257.         border-style:solid;
     
258.         border-color:transparent #fff;
     
259.     /* reduce the damage in FF3.0 */
     
260.     display:block;
     
261.     width:0;
     
262. }
     
263. .triangle-obtuse.top:before {
     
264.         top:-20px; /* value = - border-top-width - border-bottom-width */
     
265.         bottom:auto;
     
266.         left:auto;
     
267.         right:60px; /* controls horizontal position */
     
268.         border:0;
     
269.         border-left-width:30px; /* vary this value to change the width of the triangle */
     
270.         border-top-width:20px;
     
271.         border-color:transparent #c81e2b;
     
272. }
     
273. .triangle-obtuse.top:after {
     
274.         top:-20px; /* value = - border-top-width - border-bottom-width */
     
275.         bottom:auto;
     
276.         left:auto;
     
277.         right:80px; /* value = (:before's right) + (:before's border-right/left-width)  - (:after's border-right/left-width) */
     
278.         border-width:0;
     
279.         border-left-width:10px;
     
280.         border-top-width:20px;
     
281.         border-color:transparent #fff;
     
282. }
     
283. .triangle-obtuse.left:before {
     
284.         top:15px; /* controls vertical position */
     
285.         bottom:auto;
     
286.         left:-50px;
     
287.         border:0;
     
288.         border-bottom-width:30px;
     
289.         border-left-width:50px;
     
290.         border-color:#c81e2b transparent;
     
291. }
     
292. .triangle-obtuse.left:after {
     
293.         top:35px;
     
294.         bottom:auto;
     
295.         left:-50px;
     
296.         border:0;
     
297.         border-bottom-width:10px;
     
298.         border-left-width:50px;
     
299.         border-color:#fff transparent;
     
300. }
     
301. .triangle-obtuse.right:before {
     
302.         top:15px;
     
303.         bottom:auto;
     
304.     left:auto;
     
305.         right:-50px;
     
306.         border:0;
     
307.         border-bottom-width:30px; /* vary this value to change the height of the triangle */
     
308.         border-right-width:50px;
     
309.         border-color:#c81e2b transparent;
     
310. }
     
311. .triangle-obtuse.right:after {
     
312.         top:35px;
     
313.         bottom:auto;
     
314.         right:-50px; /* value = - border-left-width - border-right-width */
     
315.     left:auto;
     
316.         border:0;
     
317.         border-bottom-width:10px; /* vary this value to change the height of the triangle */
     
318.         border-right-width:50px;
     
319.         border-color:#fff transparent;
     
320. }
     
321. .triangle-border {
     
322.         position:relative;
     
323.         padding:15px;
     
324.         margin:1em 0 3em;
     
325.         border:5px solid #5a8f00;
     
326.         color:#333;
     
327.         background:#fff;
     
328.         /* css3 */
     
329.         -webkit-border-radius:10px;
     
330.         -moz-border-radius:10px;
     
331.         border-radius:10px;
     
332. }
     
333. .triangle-border.left {
     
334.         margin-left:30px;
     
335. }
     
336. .triangle-border.right {
     
337.         margin-right:30px;
     
338. }
     
339. .triangle-border:before {
     
340.         content:"";
     
341.         position:absolute;
     
342.         bottom:-20px; /* value = - border-top-width - border-bottom-width */
     
343.         left:40px; /* controls horizontal position */
     
344.     border-width:20px 20px 0;
     
345.         border-style:solid;
     
346.     border-color:#5a8f00 transparent;
     
347.     display:block;
     
348.     width:0;
     
349. }
     
350. /* creates the smaller  triangle */
     
351. .triangle-border:after {
     
352.         content:"";
     
353.         position:absolute;
     
354.         bottom:-13px; /* value = - border-top-width - border-bottom-width */
     
355.         left:47px;
     
356.         border-width:13px 13px 0;
     
357.         border-style:solid;
     
358.         border-color:#fff transparent;
     
359.     display:block;
     
360.     width:0;
     
361. }
     
362. .triangle-border.top:before {
     
363.         top:-20px; /* value = - border-top-width - border-bottom-width */
     
364.         bottom:auto;
     
365.         left:auto;
     
366.         right:40px; /* controls horizontal position */
     
367.     border-width:0 20px 20px;
     
368. }
     
369. /* creates the smaller  triangle */
     
370. .triangle-border.top:after {
     
371.         top:-13px; /* value = - border-top-width - border-bottom-width */
     
372.         bottom:auto;
     
373.         left:auto;
     
374.         right:47px; /* value = (:before right) + (:before border-right) - (:after border-right) */
     
375.     border-width:0 13px 13px;
     
376. }
     
377. .triangle-border.left:before {
     
378.         top:10px; /* controls vertical position */
     
379.         bottom:auto;
     
380.         left:-30px; /* value = - border-left-width - border-right-width */
     
381.         border-width:15px 30px 15px 0;
     
382.         border-color:transparent #5a8f00;
     
383. }
     
384. /* creates the smaller  triangle */
     
385. .triangle-border.left:after {
     
386.         top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
     
387.         bottom:auto;
     
388.         left:-21px; /* value = - border-left-width - border-right-width */
     
389.         border-width:9px 21px 9px 0;
     
390.         border-color:transparent #fff;
     
391. }
     
392. /* creates the larger triangle */
     
393. .triangle-border.right:before {
     
394.         top:10px; /* controls vertical position */
     
395.         bottom:auto;
     
396.     left:auto;
     
397.         right:-30px; /* value = - border-left-width - border-right-width */
     
398.         border-width:15px 0 15px 30px;
     
399.         border-color:transparent #5a8f00;
     
400. }
     
401. /* creates the smaller  triangle */
     
402. .triangle-border.right:after {
     
403.         top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
     
404.         bottom:auto;
     
405.     left:auto;
     
406.         right:-21px; /* value = - border-left-width - border-right-width */
     
407.         border-width:9px 0 9px 21px;
     
408.         border-color:transparent #fff;
     
409. }
     
410. .example-commentheading:before {
     
411.         content:"";
     
412.         position:absolute;
     
413.         top:9px;
     
414.         left:-25px;
     
415.         width:15px;
     
416.         height:10px;
     
417.         background:#b513af;
     
418.         /* css3 */
     
419.         -webkit-border-radius:3px;
     
420.         -moz-border-radius:3px;
     
421.         border-radius:3px;
     
422. }
     
423. /* creates the triangle */
     
424. .example-commentheading:after {
     
425.         content:"";
     
426.         position:absolute;
     
427.         top:15px;
     
428.         left:-19px;
     
429.         border:4px solid transparent;
     
430.         border-left-color:#b513af;
     
431.     /* reduce the damage in FF3.0 */
     
432.     display:block;
     
433.     width:0;
     
434. }
     
435. .example-right {
     
436.         position:relative;
     
437.         padding:15px 30px;
     
438.         margin:0;
     
439.         color:#fff;
     
440.         background:#5a8f00; /* default background for browsers without gradient support */
     
441.         /* css3 */
     
442.         background:-webkit-gradient(linear, 0 0, 0 100%, from(#b8db29), to(#5a8f00));
     
443.         background:-moz-linear-gradient(#b8db29, #5a8f00);
     
444.         background:-o-linear-gradient(#b8db29, #5a8f00);
     
445.         background:linear-gradient(#b8db29, #5a8f00);
     
446.         -webkit-border-radius:10px;
     
447.         -moz-border-radius:10px;
     
448.         border-radius:10px;
     
449. }
     
450. .example-right + p {margin:15px 0 2em 85px; font-style:italic;}
     
451. .example-right:after {
     
452.         content:"";
     
453.         position:absolute;
     
454.         bottom:-50px;
     
455.         left:50px;
     
456.         border-width:0 20px 50px 0px;
     
457.         border-style:solid;
     
458.         border-color:transparent #5a8f00;
     
459.     /* reduce the damage in FF3.0 */
     
460.     display:block;
     
461.     width:0;
     
462. }
     
463. .example-obtuse {
     
464.         position:relative;
     
465.         padding:15px 30px;
     
466.         margin:0;
     
467.         color:#000;
     
468.         background:#f3961c; /* default background for browsers without gradient support */
     
469.         /* css3 */
     
470.     background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
     
471.         background:-moz-linear-gradient(#f9d835, #f3961c);
     
472.         background:-o-linear-gradient(#f9d835, #f3961c);
     
473.         background:linear-gradient(#f9d835, #f3961c);
     
474.         /* Using longhand to avoid inconsistencies between Safari 4 and Chrome 4 */
     
475.         -webkit-border-top-left-radius:25px 50px;
     
476.         -webkit-border-top-right-radius:25px 50px;
     
477.         -webkit-border-bottom-right-radius:25px 50px;
     
478.         -webkit-border-bottom-left-radius:25px 50px;
     
479.         -moz-border-radius:25px / 50px;
     
480.         border-radius:25px / 50px;
     
481. }
     
482. .example-obtuse + p {margin:10px 150px 2em 0; text-align:right; font-style:italic;}
     
483. .example-obtuse:before {
     
484.         content:"";
     
485.         position:absolute;
     
486.         bottom:-30px;
     
487.         right:80px;
     
488.         border-width:0 0 30px 50px;
     
489.         border-style:solid;
     
490.         border-color:transparent #f3961c;
     
491.     /* reduce the damage in FF3.0 */
     
492.     display:block;
     
493.     width:0;
     
494. }
     
495. /* creates the smaller triangle */
     
496. .example-obtuse:after {
     
497.         content:"";
     
498.         position:absolute;
     
499.         bottom:-30px;
     
500.         right:110px;
     
501.         border-width:0 0 30px 20px;
     
502.         border-style:solid;
     
503.         border-color:transparent #fff;
     
504.     /* reduce the damage in FF3.0 */
     
505.     display:block;
     
506.     width:0;
     
507. }
     
508. .example-twitter {
     
509.         position:relative;
     
510.         padding:15px;
     
511.         margin:100px 0 0.5em;
     
512.         color:#333;
     
513.         background:#eee;
     
514.         /* css3 */
     
515.         -webkit-border-radius:10px;
     
516.         -moz-border-radius:10px;
     
517.         border-radius:10px;
     
518. }
     
519. .example-twitter p {font-size:28px; line-height:1.25em;}
     
520. .example-twitter:before {
     
521.         content:url(twitter-logo.gif);
     
522.         position:absolute;
     
523.         top:-60px;
     
524.         left:0;
     
525.         width:155px;
     
526.         height:36px;
     
527.     /* reduce the damage in FF3.0 */
     
528.     display:block;
     
529. }
     
530. .example-twitter:after {
     
531.         content:"";
     
532.         position:absolute;
     
533.         top:-30px;
     
534.         left:50px;
     
535.         border:15px solid transparent;
     
536.         border-bottom-color:#eee;
     
537.     /* reduce the damage in FF3.0 */
     
538.     display:block;
     
539.     width:0;
     
540. }
     
541. .example-twitter + p {padding-left:15px; font:14px Arial, sans-serif;}
     
542. .example-number {
     
543.         position:relative;
     
544.         width:200px;
     
545.         height:200px;
     
546.         margin:50px 0 200px;
     
547.         text-align:center;
     
548.         font:140px/200px Arial, sans-serif;
     
549.         color:#fff;
     
550.         background:#C91F2C;
     
551. }
     
552. .example-number:before {
     
553.         content:"";
     
554.         position:absolute;
     
555.         bottom:-140px;
     
556.         right:0;
     
557.         border-width:0 0 140px 140px;
     
558.         border-style:solid;
     
559.         border-color:transparent #C91F2C;
     
560. }
     
561. .example-number:after {
     
562.         content:"";
     
563.         position:absolute;
     
564.         bottom:-140px;
     
565.         right:85px;
     
566.         border-width:0 0 140px 55px;
     
567.         border-style:solid;
     
568.         border-color:transparent #fff;
     
569. }
     
570. .pinched {
     
571.         position:relative;
     
572.         padding:15px;
     
573.         margin:50px 0 3em;
     
574.         text-align:center;
     
575.         color:#fff;
     
576.         background:#333;
     
577.         /* css3 */
     
578.         -webkit-border-radius:10px;
     
579.         -moz-border-radius:10px;
     
580.         border-radius:10px;
     
581. }
     
582. .pinched:before {
     
583.         content:"";
     
584.         position:absolute;
     
585.         top:-20px;
     
586.         left:50%;
     
587.         width:100px;
     
588.         height:20px;
     
589.         margin:0 0 0 -50px;
     
590.         background:#333;
     
591. }
     
592. .pinched:after {
     
593.         content:"";
     
594.         position:absolute;
     
595.         top:-20px;
     
596.         left:0;
     
597.         width:50%;
     
598.         height:20px;
     
599.         background:#fff;
     
600.         /* css3 */
     
601.         -webkit-border-bottom-right-radius:15px;
     
602.         -moz-border-radius-bottomright:15px;
     
603.         border-bottom-right-radius:15px;
     
604. }
     
605. .pinched > :first-child:before {
     
606.         content:"";
     
607.         position:absolute;
     
608.         top:-20px;
     
609.         right:0;
     
610.         width:50%;
     
611.         height:20px;
     
612.         background:#fff;
     
613.         /* css3 */
     
614.         -webkit-border-bottom-left-radius:15px;
     
615.         -moz-border-radius-bottomleft:15px;
     
616.         border-bottom-left-radius:15px;
     
617. }
     
618. .oval-speech {
     
619.         position:relative;
     
620.         width:270px;
     
621.         padding:50px 40px;
     
622.         margin:1em auto 50px;
     
623.         text-align:center;
     
624.         color:#fff;
     
625.         background:#5a8f00;
     
626.         /* css3 */
     
627.         background:-webkit-gradient(linear, 0 0, 0 100%, from(#b8db29), to(#5a8f00));
     
628.         background:-moz-linear-gradient(#b8db29, #5a8f00);
     
629.         background:-o-linear-gradient(#b8db29, #5a8f00);
     
630.         background:linear-gradient(#b8db29, #5a8f00);
     
631.         -webkit-border-top-left-radius:220px 120px;
     
632.         -webkit-border-top-right-radius:220px 120px;
     
633.         -webkit-border-bottom-right-radius:220px 120px;
     
634.         -webkit-border-bottom-left-radius:220px 120px;
     
635.         -moz-border-radius:220px / 120px;
     
636.         border-radius:220px / 120px;
     
637. }
     
638. .oval-speech p {font-size:1.25em;}
     
639. .oval-speech:before {
     
640.         content:"";
     
641.         position:absolute;
     
642.         z-index:-1;
     
643.         bottom:-30px;
     
644.         right:50%;
     
645.         height:30px;
     
646.         border-right:60px solid #5a8f00;
     
647.         background:#5a8f00; /* need this for webkit - bug in handling of border-radius */
     
648.         /* css3 */
     
649.         -webkit-border-bottom-right-radius:80px 50px;
     
650.         -moz-border-radius-bottomright:80px 50px;
     
651.         border-bottom-right-radius:80px 50px;
     
652.         /* using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */
     
653.         -webkit-transform:translate(0, -2px);
     
654.         -moz-transform:translate(0, -2px);
     
655.         -ms-transform:translate(0, -2px);
     
656.         -o-transform:translate(0, -2px);
     
657.         transform:translate(0, -2px);
     
658. }
     
659. /* creates part of the curved pointy bit */
     
660. .oval-speech:after {
     
661.         content:"";
     
662.         position:absolute;
     
663.         z-index:-1;
     
664.         bottom:-30px;
     
665.         right:50%;
     
666.         width:60px;
     
667.         height:30px;
     
668.         background:#fff;
     
669.         /* css3 */
     
670.         -webkit-border-bottom-right-radius:40px 50px;
     
671.         -moz-border-radius-bottomright:40px 50px;
     
672.         border-bottom-right-radius:40px 50px;
     
673.         /* using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */
     
674.         -webkit-transform:translate(-30px, -2px);
     
675.         -moz-transform:translate(-30px, -2px);
     
676.         -ms-transform:translate(-30px, -2px);
     
677.         -o-transform:translate(-30px, -2px);
     
678.         transform:translate(-30px, -2px);
     
679. }
     
680. .oval-thought {
     
681.         position:relative;
     
682.         width:270px;
     
683.         padding:50px 40px;
     
684.         margin:1em auto 80px;
     
685.         text-align:center;
     
686.         color:#fff;
     
687.         background:#075698;
     
688.         /* css3 */
     
689.         background:-webkit-gradient(linear, 0 0, 0 100%, from(#2e88c4), to(#075698));
     
690.         background:-moz-linear-gradient(#2e88c4, #075698);
     
691.         background:-o-linear-gradient(#2e88c4, #075698);
     
692.         background:linear-gradient(#2e88c4, #075698);
     
693.         /*
     
694.         NOTES:
     
695.         -webkit-border-radius:220px 120px; // produces oval in safari 4 and chrome 4
     
696.         -webkit-border-radius:220px / 120px; // produces oval in chrome 4 (again!) but not supported in safari 4
     
697.         Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this
     
698.         */
     
699.         -webkit-border-top-left-radius:220px 120px;
     
700.         -webkit-border-top-right-radius:220px 120px;
     
701.         -webkit-border-bottom-right-radius:220px 120px;
     
702.         -webkit-border-bottom-left-radius:220px 120px;
     
703.         -moz-border-radius:220px / 120px;
     
704.         border-radius:220px / 120px;
     
705. }
     
706. .oval-thought p {font-size:1.25em;}
     
707. /* creates the larger circle */
     
708. .oval-thought:before {
     
709.         content:"";
     
710.         position:absolute;
     
711.         bottom:-20px;
     
712.         left:50px;
     
713.         width:30px;
     
714.         height:30px;
     
715.         background:#075698;
     
716.         /* css3 */
     
717.         -webkit-border-radius:30px;
     
718.         -moz-border-radius:30px;
     
719.         border-radius:30px;
     
720. }
     
721. /* creates the smaller circle */
     
722. .oval-thought:after {
     
723.         content:"";
     
724.         position:absolute;
     
725.         bottom:-30px;
     
726.         left:30px;
     
727.         width:15px;
     
728.         height:15px;
     
729.         background:#075698;
     
730.         /* css3 */
     
731.         -webkit-border-radius:15px;
     
732.         -moz-border-radius:15px;
     
733.         border-radius:15px;
     
734. }
     
735. .oval-quotes {
     
736.         position:relative;
     
737.         width:400px;
     
738.         height:350px;
     
739.         margin:2em auto 10px;
     
740.         color:#000;
     
741.         background:#ffed26;
     
742.         /* css3 */
     
743.         /*
     
744.         NOTES:
     
745.         -webkit-border-radius:Apx Bpx; // produces oval in safari 4 and chrome 4
     
746.         -webkit-border-radius:Apx / Bpx; // produces oval in chrome 4 (again!) but not supported in safari 4
     
747.         Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this
     
748.         */
     
749.         -webkit-border-top-left-radius:400px 350px;
     
750.         -webkit-border-top-right-radius:400px 350px;
     
751.         -webkit-border-bottom-right-radius:400px 350px;
     
752.         -webkit-border-bottom-left-radius:400px 350px;
     
753.         -moz-border-radius:400px / 350px;
     
754.         border-radius:400px / 350px;
     
755. }
     
756. /* creates opening quotation mark */
     
757. .oval-quotes:before {
     
758.         content:"\201C";
     
759.         position:absolute;
     
760.         z-index:1;
     
761.         top:20px;
     
762.         left:20px;
     
763.         font:80px/1 Georgia, serif;
     
764.         color:#ffed26;
     
765. }
     
766. /* creates closing quotation mark */
     
767. .oval-quotes:after {
     
768.         content:"\201D";
     
769.         position:absolute;
     
770.         z-index:1;
     
771.         bottom:0;
     
772.         right:20px;
     
773.         font:80px/0.25 Georgia, serif;
     
774.         color:#ffed26;
     
775. }
     
776. .oval-quotes p {
     
777.         width:250px;
     
778.         height:250px;
     
779.         padding:50px 0 0;
     
780.         margin:0 auto;
     
781.         text-align:center;
     
782.         font-size:35px;
     
783. }
     
784. /* creates smaller curve */
     
785. .oval-quotes p:before {
     
786.         content:"";
     
787.         position:absolute;
     
788.         z-index:-1;
     
789.         bottom:-30px;
     
790.         right:55%;
     
791.         width:180px; /* wider than necessary to make it look a bit better in IE8 */
     
792.         height:60px;
     
793.         background:#fff; /* need this for webkit - bug in handling of border-radius */
     
794.         /* css3 */
     
795.         -webkit-border-bottom-right-radius:40px 50px;
     
796.         -moz-border-radius-bottomright:40px 50px;
     
797.         border-bottom-right-radius:40px 50px;
     
798.         /* using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */
     
799.         -webkit-transform:translate(-30px, -2px);
     
800.         -moz-transform:translate(-30px, -2px);
     
801.         -ms-transform:translate(-30px, -2px);
     
802.         -o-transform:translate(-30px, -2px);
     
803.         transform:translate(-30px, -2px);
     
804. }
     
805. /* creates larger curve */
     
806. .oval-quotes p:after {
     
807.         content:"";
     
808.         position:absolute;
     
809.         z-index:-2;
     
810.         bottom:-30px;
     
811.         right:25%;
     
812.         height:80px;
     
813.         border-right:200px solid #ffed26;
     
814.         background:#ffed26; /* need this for webkit - bug in handling of border-radius */
     
815.         /* css3 */
     
816.         -webkit-border-bottom-right-radius:200px 100px;
     
817.         -moz-border-radius-bottomright:200px 100px;
     
818.         border-bottom-right-radius:200px 100px;
     
819.         /* using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */
     
820.         -webkit-transform:translate(0, -2px);
     
821.         -moz-transform:translate(0, -2px);
     
822.         -ms-transform:translate(0, -2px);
     
823.         -o-transform:translate(0, -2px);
     
824.         transform:translate(0, -2px);
     
825.     /* reduce the damage in FF3.0 */
     
826.     display:block;
     
827.     width:0;
     
828. }
     
829. .oval-quotes + p {
     
830.         position:relative; /* part of the IE8 width compromise */
     
831.         width:150px;
     
832.         margin:0 0 2em;
     
833.         font-size:18px;
     
834.         font-weight:bold;
     
835. }
     
836. .rectangle-speech-border {
     
837.         position:relative;
     
838.         padding:50px 15px;
     
839.         margin:1em 0 3em;
     
840.         border:10px solid #5a8f00;
     
841.         text-align:center;
     
842.         color:#333;
     
843.         background:#fff;
     
844.         /* css3 */
     
845.         -webkit-border-radius:20px;
     
846.         -moz-border-radius:20px;
     
847.         border-radius:20px;
     
848. }
     
849. /* creates larger curve */
     
850. .rectangle-speech-border:before {
     
851.         content:"";
     
852.         position:absolute;
     
853.         z-index:10;
     
854.         bottom:-40px;
     
855.         left:50px;
     
856.         width:50px;
     
857.         height:30px;
     
858.         border-style:solid;
     
859.         border-width:0 10px 10px 0;
     
860.         border-color:#5a8f00;
     
861.         background:transparent;
     
862.         /* css3 */
     
863.         -webkit-border-bottom-right-radius:80px 50px;
     
864.         -moz-border-radius-bottomright:80px 50px;
     
865.         border-bottom-right-radius:80px 50px;
     
866.     /* reduce the damage in FF3.0 */
     
867.     display:block;
     
868. }
     
869. /* creates smaller curve */
     
870. .rectangle-speech-border:after {
     
871.         content:"";
     
872.         position:absolute;
     
873.         z-index:10;
     
874.         bottom:-40px;
     
875.         left:50px;
     
876.         width:20px;
     
877.         height:30px;
     
878.         border-style:solid;
     
879.         border-width:0 10px 10px 0;
     
880.         border-color:#5a8f00;
     
881.         background:transparent;
     
882.         /* css3 */
     
883.         -webkit-border-bottom-right-radius:40px 50px;
     
884.         -moz-border-radius-bottomright:40px 50px;
     
885.         border-bottom-right-radius:40px 50px;
     
886.     /* reduce the damage in FF3.0 */
     
887.     display:block;
     
888. }
     
889. /* creates a small circle to produce a rounded point where the two curves meet */
     
890. .rectangle-speech-border > :first-child:before {
     
891.         content:"";
     
892.         position:absolute;
     
893.         bottom:-40px;
     
894.         left:45px;
     
895.         width:10px;
     
896.         height:10px;
     
897.         background:#5a8f00;
     
898.         /* css3 */
     
899.         -webkit-border-radius:10px;
     
900.         -moz-border-radius:10px;
     
901.         border-radius:10px;
     
902. }
     
903. /* creates a white rectangle to cover part of the oval border*/
     
904. .rectangle-speech-border > :first-child:after {
     
905.         content:"";
     
906.         position:absolute;
     
907.         bottom:-10px;
     
908.         left:76px;
     
909.         width:24px;
     
910.         height:15px;
     
911.         background:#fff;
     
912. }
     
913. .oval-speech-border {
     
914.         position:relative;
     
915.         padding:70px 30px;
     
916.         margin:1em auto 60px;
     
917.         border:10px solid #f3961c;
     
918.         text-align:center;
     
919.         color:#333;
     
920.         background:#fff;
     
921.         /* css3 */
     
922.         /*
     
923.         NOTES:
     
924.         -webkit-border-radius:240px 140px; // produces oval in safari 4 and chrome 4
     
925.         -webkit-border-radius:240px / 140px; // produces oval in chrome 4 (again!) but not supported in safari 4
     
926.         Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this
     
927.         */
     
928.         -webkit-border-top-left-radius:240px 140px;
     
929.         -webkit-border-top-right-radius:240px 140px;
     
930.         -webkit-border-bottom-right-radius:240px 140px;
     
931.         -webkit-border-bottom-left-radius:240px 140px;
     
932.         -moz-border-radius:240px / 140px;
     
933.         border-radius:240px / 140px;
     
934. }
     
935. /* creates larger curve */
     
936. .oval-speech-border:before {
     
937.         content:"";
     
938.         position:absolute;
     
939.         z-index:2;
     
940.         bottom:-40px;
     
941.         right:50%;
     
942.         width:50px;
     
943.         height:30px;
     
944.         border-style:solid;
     
945.         border-width:0 10px 10px 0;
     
946.         border-color:#f3961c;
     
947.         margin-right:-10px;
     
948.         background:transparent;
     
949.         /* css3 */
     
950.         -webkit-border-bottom-right-radius:80px 50px;
     
951.         -moz-border-radius-bottomright:80px 50px;
     
952.         border-bottom-right-radius:80px 50px;
     
953.     /* reduce the damage in FF3.0 */
     
954.     display:block;
     
955. }
     
956. /* creates smaller curve */
     
957. .oval-speech-border:after {
     
958.         content:"";
     
959.         position:absolute;
     
960.         z-index:2;
     
961.         bottom:-40px;
     
962.         right:50%;
     
963.         width:20px;
     
964.         height:31px;
     
965.         border-style:solid;
     
966.         border-width:0 10px 10px 0;
     
967.         border-color:#f3961c;
     
968.         margin-right:20px;
     
969.         background:transparent;
     
970.         /* css3 */
     
971.         -webkit-border-bottom-right-radius:40px 50px;
     
972.         -moz-border-radius-bottomright:40px 50px;
     
973.         border-bottom-right-radius:40px 50px;
     
974.     /* reduce the damage in FF3.0 */
     
975.     display:block;
     
976. }
     
977. /* creates a small circle to produce a rounded point where the two curves meet */
     
978. .oval-speech-border > :first-child:before {
     
979.         content:"";
     
980.         position:absolute;
     
981.         z-index:1;
     
982.         bottom:-40px;
     
983.         right:50%;
     
984.         width:10px;
     
985.         height:10px;
     
986.         margin-right:45px;
     
987.         background:#f3961c;
     
988.         /* css3 */
     
989.         -webkit-border-radius:10px;
     
990.         -moz-border-radius:10px;
     
991.         border-radius:10px;
     
992. }
     
993. /* creates a white rectangle to cover part of the oval border*/
     
994. .oval-speech-border > :first-child:after {
     
995.         content:"";
     
996.         position:absolute;
     
997.         z-index:1;
     
998.         bottom:-10px;
     
999.         right:50%;
     
1000.         width:30px;
      
1001.         height:15px;
      
1002.         background:#fff;
      
1003. }
      
1004. .oval-thought-border {
      
1005.         position:relative;
      
1006.         padding:70px 30px;
      
1007.         margin:1em auto 80px;
      
1008.         border:10px solid #c81e2b;
      
1009.         text-align:center;
      
1010.         color:#333;
      
1011.         background:#fff;
      
1012.         /* css3 */
      
1013.         /*
      
1014.         NOTES:
      
1015.         -webkit-border-radius:240px 140px; // produces oval in safari 4 and chrome 4
      
1016.         -webkit-border-radius:240px / 140px; // produces oval in chrome 4 (again!) but not supported in safari 4
      
1017.         Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this
      
1018.         */
      
1019.         -webkit-border-top-left-radius:240px 140px;
      
1020.         -webkit-border-top-right-radius:240px 140px;
      
1021.         -webkit-border-bottom-right-radius:240px 140px;
      
1022.         -webkit-border-bottom-left-radius:240px 140px;
      
1023.         -moz-border-radius:240px / 140px;
      
1024.         border-radius:240px / 140px;
      
1025. }
      
1026. /* creates the larger circle */
      
1027. .oval-thought-border:before {
      
1028.         content:"";
      
1029.         position:absolute;
      
1030.         z-index:10;
      
1031.         bottom:-40px;
      
1032.         right:100px;
      
1033.         width:50px;
      
1034.         height:50px;
      
1035.         border:10px solid #c81e2b;
      
1036.         background:#fff;
      
1037.         /* css3 */
      
1038.         -webkit-border-radius:50px;
      
1039.         -moz-border-radius:50px;
      
1040.         border-radius:50px;
      
1041.     /* reduce the damage in FF3.0 */
      
1042.     display:block;
      
1043. }
      
1044. /* creates the smaller circle */
      
1045. .oval-thought-border:after {
      
1046.         content:"";
      
1047.         position:absolute;
      
1048.         z-index:10;
      
1049.         bottom:-60px;
      
1050.         right:50px;
      
1051.         width:25px;
      
1052.         height:25px;
      
1053.         border:10px solid #c81e2b;
      
1054.         background:#fff;
      
1055.         /* css3 */
      
1056.         -webkit-border-radius:25px;
      
1057.         -moz-border-radius:25px;
      
1058.         border-radius:25px;
      
1059.     /* reduce the damage in FF3.0 */
      
1060.     display:block;
      
1061. }
      
1062.     </style>
      
1063.         <script>       
      
1064.                 var _gaq = _gaq || [];         _gaq.push(['_setAccount', 'UA-7489188-1']); _gaq.push(['_trackPageview']);
      
1065.                 (function() {
      
1066.                         var ga = document.createElement('script'); ga.async = true; ga.src = 'http://www.google-analytics.com/ga.js';
      
1067.                         var s = document.getElementsByTagName('script')[0];
      
1068.                         s.parentNode.insertBefore(ga, s);
      
1069.                 })();
      
1070.         </script>
      
1071. </head>
      
1072. <body>
      
1073.         <div id="container">
      
1074.                 <div class="content">
      
1075.                         <p class="triangle-isosceles">This only needs one HTML element.</p>
      
1076.                         <p class="triangle-isosceles top">For example, <code><p>[text]</p></code>.</p>
      
1077.                         <p class="triangle-isosceles left">But it could be any element you want.</p>
      
1078.                         <p class="triangle-isosceles right">The entire appearance is created only with CSS.</p>
      
1079.                         <p class="triangle-right">This only needs one HTML element.</p>
      
1080.                         <p class="triangle-right top">For example, <code><p>[text]</p></code>.</p>
      
1081.                         <p class="triangle-right left">But it could be any element you want.</p>
      
1082.                         <p class="triangle-right right">The entire appearance is created only with CSS.</p>
      
1083.                         <p class="triangle-obtuse">This only needs one HTML element.</p>
      
1084.                         <p class="triangle-obtuse top">For example, <code><p>[text]</p></code>.</p>
      
1085.                         <p class="triangle-obtuse left">But it could be any element you want.</p>
      
1086.                         <p class="triangle-obtuse right">The entire appearance is created only with CSS.</p>
      
1087.                         <p class="triangle-border">This only needs one HTML element.</p>
      
1088.                         <p class="triangle-border top">For example, <code><p>[text]</p></code>.</p>
      
1089.                         <p class="triangle-border left">But it could be any element you want.</p>
      
1090.                         <p class="triangle-border right">The entire appearance is created only with CSS.</p>
      
1091.                         <h2>Simple examples</h2>
      
1092.                         <h3 class="example-commentheading">125 comments</h3>
      
1093.                         <blockquote class="example-right">
      
1094.                                 <p>Design is directed toward human beings. To design is to solve human problems by identifying them and executing the best solution.</p>
      
1095.                         </blockquote>
      
1096.                         <p>Ivan Chermayeff</p>
      
1097.                         <blockquote class="example-obtuse">
      
1098.                                 <p>It’s not what you look at that matters, it’s what you see.</p>
      
1099.                         </blockquote>
      
1100.                         <p>Henry David Thoreau</p>
      
1101.                         <blockquote class="example-twitter" cite="http://twitter.com/necolas/status/9880187933">
      
1102.                                 <p>Takes me longer to write up blog posts on experiments or projects than to create them in the first place.</p>
      
1103.                         </blockquote>
      
1104.                         <p><a href="http://twitter.com/necolas">@necolas</a> at <a href="http://twitter.com/necolas/status/9880187933">4:05 PM March 2nd 2010</a></p>
      
1105.                         <div class="example-number">57</div>
      
1106.                         <h2>More complex CSS3 examples</h2>
      
1107.                         <p>Some more experimental speech bubbles that try to limit the damage in browsers lacking the necessary CSS3 support.</p>
      
1108.                         <div class="pinched">
      
1109.                                 <p><strong>It doesn’t matter what the first child element of this div is</strong>...but it does need a child element.</p>
      
1110.                         </div>
      
1111.                         <blockquote class="oval-speech">
      
1112.                                 <p>This is a blockquote that is styled to look like a speech bubble</p>
      
1113.                         </blockquote>
      
1114.                         <blockquote class="oval-thought">
      
1115.                                 <p>This is a blockquote that is styled to look like a thought bubble</p>
      
1116.                         </blockquote>
      
1117.                         <blockquote class="oval-quotes">
      
1118.                                 <p>No, Donny, these men are nihilists, there’s nothing to be afraid of.</p>
      
1119.                         </blockquote>
      
1120.                         <p>Walter Sobchak</p>
      
1121.                         <blockquote class="rectangle-speech-border">
      
1122.                                 <p>This is a blockquote that is styled to look like a speech bubble</p>
      
1123.                         </blockquote>
      
1124.                         <blockquote class="oval-speech-border">
      
1125.                                 <p>This is a blockquote that is styled to look like a speech bubble</p>
      
1126.                         </blockquote>
      
1127.                         <blockquote class="oval-thought-border">
      
1128.                                 <p>This is a blockquote that is styled to look like a thought bubble</p>
      
1129.                         </blockquote>
      
1130.                 </div>
      
1131.         </div>
      
1132. </body>
      
1133. </html>

复制代码