160419、CSS3实现32种基本图形

CSS3可以实现很多漂亮的图形，我收集了32种图形，在下面列出。直接用CSS3画出这些图形，要比贴图性能更好，体验更加，是一种非常好的网页美观方式。

这32种图形分别为圆形，椭圆形，三角形，倒三角形，左三角形，右三角形，菱形，梯形，长方形，正方形，圆环，平行四边形，五角星，六角星，五边形，六边形，八边形，心形，蛋形，无穷符号，消息提示框，钻石，八卦图，食豆人，扇形，月牙，顶左直角三角形，顶右直角三角形 ，底左直角三角形 ，底右直角三角形 ，八角形， 十二角形。
     网页代码中用到（<!-- 浮动Div换行 --> <div style="clear:both">）和Div边距设置和浮动（margin: 20px 20px; float: left;）。

参考文章：编程之家：http://blog.csdn.net/chenhongwu666/article/details/38905803

1. 圆形：设置宽度和高度相等，border-radius属性为宽度或高度的一半。

效果图：

[css] view plain copy

print?

  1. #Circle{
  2. width:100px;
  3. height:100px;
  4. float: left;
  5. background: #6fee1d;
  6. -moz-border-radius: 50px;
  7. -webkit-border-radius: 50px;
  8. border-radius: 50px;
  9. }

2.椭圆形：圆形的变体，高度设置为宽度的一半，border-radius属性为高度除以高度一半。

效果图：

[css] view plain copy

print?

  1. #Oval {
  2. width: 200px;
  3. height: 100px;
  4. float: left;
  5. background: #e9880c;
  6. -webkit-border-radius: 100px / 50px;
  7. -moz-border-radius: 100px / 50px;
  8. border-radius: 100px / 50px;
  9. }

3.三角形：宽度和高度设置为0，border设置左，右边透明，底边可见Solid。

效果图：

[css] view plain copy

print?

  1. #Triangle {
  2. width: 0;
  3. height: 0;
  4. float: left;
  5. border-bottom: 100px solid #fcf706;
  6. border-left: 50px solid transparent;
  7. border-right: 50px solid transparent;
  8. }

4.倒三角形：宽度和高度设置为0，border设置左，右边透明，顶边可见Solid。

效果图：

[css] view plain copy

print?

  1. #InvertedTriangle {
  2. width: 0;
  3. height: 0;
  4. float: left;
  5. border-top: 100px solid #30a3bf;
  6. border-left: 50px solid transparent;
  7. border-right: 50px solid transparent;
  8. }

5.左三角形：宽度和高度设置为0，border设置上，下边透明，右边可见Solid。

效果图：

[css] view plain copy

print?

  1. #LeftTriangle {
  2. width: 0;
  3. height: 0;
  4. float: left;
  5. border-top: 50px solid transparent;
  6. border-right: 100px solid #466f20;
  7. border-bottom: 50px solid transparent;
  8. }

6.右三角形：宽度和高度设置为0，border设置上，下边透明，左边可见Solid。

效果图：

[css] view plain copy

print?

  1. #RightTriangle {
  2. width: 0;
  3. height: 0;
  4. float: left;
  5. border-top: 50px solid transparent;
  6. border-left: 100px solid #800820;
  7. border-bottom: 50px solid transparent;
  8. }

7.菱形：使用transform和rotate相结合，使两个正反三角形上下显示。

效果图：

[css] view plain copy

print?

  1. #Diamond {
  2. width: 100px;
  3. height: 100px;
  4. float: left;
  5. background: #8e00ff;
  6. /* Rotate */
  7. -webkit-transform: rotate(-45deg);
  8. -moz-transform: rotate(-45deg);
  9. -ms-transform: rotate(-45deg);
  10. -o-transform: rotate(-45deg);
  11. transform: rotate(-45deg);
  12. /* Rotate Origin */
  13. -webkit-transform-origin: 0 100%;
  14. -moz-transform-origin: 0 100%;
  15. -ms-transform-origin: 0 100%;
  16. -o-transform-origin: 0 100%;
  17. transform-origin: 0 100%;
  18. margin: 40px 0 10px 240px;
  19. }

8.梯形：三角形的变体，设置左右两条边相等，并且给它设置一个宽度。

效果图：

[css] view plain copy

print?

  1. #Trapezium {
  2. height: 0;
  3. width: 100px;
  4. float: left;
  5. border-bottom: 100px solid #dc2500;
  6. border-left: 50px solid transparent;
  7. border-right: 50px solid transparent;
  8. }

9.长方形：宽比高长。

效果图：

[css] view plain copy

print?

  1. #Rectangle {
  2. height: 50px;
  3. width: 100px;
  4. float: left;
  5. background: #afe05d;
  6. }

10.正方形：宽和高相等。

效果图：

[css] view plain copy

print?

  1. #Square {
  2. height: 100px;
  3. width: 100px;
  4. float: left;
  5. background: #b02089;
  6. }

11.圆环：在圆形的基础上设置边界，边界颜色与圆形填充颜色不同。

效果图：

[css] view plain copy

print?

  1. #Ring {
  2. width: 100px;
  3. height: 100px;
  4. float: left;
  5. background-color: white;
  6. border-radius: 80px;
  7. border:5px #ffd700 solid;
  8. }

12.平行四边形：使用transform使长方形倾斜一个角度。

效果图：

[css] view plain copy

print?

  1. #Parallelogram {
  2. width: 120px;
  3. height: 80px;
  4. float: left;
  5. margin-left: 10px;
  6. -webkit-transform: skew(30deg);
  7. -moz-transform: skew(230deg);
  8. -o-transform: skew(30deg);
  9. transform: skew(30deg);
  10. background-color: #2eda01;
  11. }

13.五角星：星形的实现方式比较复杂，主要是使用transform属性来旋转不同的边。

效果图：

[css] view plain copy

print?

  1. #FiveStar {
  2. width: 0;
  3. height: 0;
  4. float: left;
  5. margin: 20px 20px;
  6. color: #ff0012;
  7. position: relative;
  8. display: block;
  9. border-right: 80px solid transparent;
  10. border-bottom: 60px solid #ff0012;
  11. border-left: 80px solid transparent;
  12. -moz-transform: rotate(35deg);
  13. -webkit-transform: rotate(35deg);
  14. -ms-transform: rotate(35deg);
  15. -o-transform: rotate(35deg);
  16. }
  17. #FiveStar:before {
  18. height: 0;
  19. width: 0;
  20. content: ‘‘;
  21. position: absolute;
  22. display: block;
  23. top: -35px;
  24. left: -50px;
  25. border-bottom: 60px solid #ff0012;
  26. border-left: 20px solid transparent;
  27. border-right: 20px solid transparent;
  28. -webkit-transform: rotate(-35deg);
  29. -moz-transform: rotate(-35deg);
  30. -ms-transform: rotate(-35deg);
  31. -o-transform: rotate(-35deg);
  32. }
  33. #FiveStar:after {
  34. width: 0;
  35. height: 0;
  36. content: ‘‘;
  37. position: absolute;
  38. display: block;
  39. top: 3px;
  40. left: -85px;
  41. color: #ff0012;
  42. border-right: 80px solid transparent;
  43. border-bottom: 60px solid #ff0012;
  44. border-left: 80px solid transparent;
  45. -webkit-transform: rotate(-70deg);
  46. -moz-transform: rotate(-70deg);
  47. -ms-transform: rotate(-70deg);
  48. -o-transform: rotate(-70deg);
  49. }

14.六角星：使用transform属性来旋转不同的边。

效果图：

[css] view plain copy

print?

  1. #SixStar{
  2. width: 0;
  3. height: 0;
  4. float: left;
  5. border-left: 50px solid transparent;
  6. border-right: 50px solid transparent;
  7. border-bottom: 100px solid #cfd810;
  8. position: relative;
  9. }
  10. #SixStar:after{
  11. width: 0;
  12. height: 0;
  13. content: "";
  14. border-top: 100px solid #cfd810;
  15. border-left: 50px solid transparent;
  16. border-right: 50px solid transparent;
  17. position: absolute;
  18. top: 30px;
  19. left: -50px;
  20. }

15.六边形：在长方形上面和下面各放置一个三角形。

效果图：

[css] view plain copy

print?

  1. #Hexagon {
  2. width: 100px;
  3. height: 55px;
  4. float: left;
  5. background: #000001;
  6. position: relative;
  7. margin: 10px auto;
  8. }
  9. #Hexagon:before {
  10. content: "";
  11. width: 0;
  12. height: 0;
  13. position: absolute;
  14. top: -25px;
  15. left: 0;
  16. border-left: 50px solid transparent;
  17. border-right: 50px solid transparent;
  18. border-bottom: 25px solid #000001;
  19. }
  20. #Hexagon:after {
  21. content: "";
  22. width: 0;
  23. height: 0;
  24. position: absolute;
  25. bottom: -25px;
  26. left: 0;
  27. border-left: 50px solid transparent;
  28. border-right: 50px solid transparent;
  29. border-top: 25px solid #000001;
  30. }

16.五边形：可以采用三角形和梯形组合。

效果图：

[css] view plain copy

print?

  1. #Pentagon{
  2. width: 60px;
  3. float: left;
  4. position: relative;
  5. border-width: 52px 20px 0;
  6. border-style: solid;
  7. border-color: #711ee2 transparent;
  8. }
  9. #Pentagon:before{
  10. content: "";
  11. position: absolute;
  12. width: 0;
  13. height: 0;
  14. top: -92px;
  15. left: -20px;
  16. border-width: 0 50px 40px;
  17. border-style: solid;
  18. border-color: transparent transparent #711ee2;
  19. }

17.八边形：在长方形上面和下面各放置一个梯形。

效果图：

[css] view plain copy

print?

  1. #Octagon{
  2. width: 100px;
  3. height: 100px;
  4. float: left;
  5. margin: 10px 10px;
  6. background-color: #66e006;
  7. position: relative;
  8. }
  9. #Octagon:before{
  10. width: 42px;
  11. height: 0;
  12. top: 0;
  13. left: 0;
  14. position: absolute;
  15. content: "";
  16. border-left: 29px solid #ffffff;
  17. border-right: 29px solid #ffffff;
  18. border-bottom: 29px solid #66e006;
  19. }
  20. #Octagon:after{
  21. width: 42px;
  22. height: 0;
  23. left: 0;
  24. bottom: 0;
  25. position: absolute;
  26. content: "";
  27. border-left: 29px solid #ffffff;
  28. border-right: 29px solid #ffffff;
  29. border-top: 29px solid #66e006;
  30. }

18.心形：心形的制作是非常复杂的，可以使用伪元素来制作，分别将伪元素旋转不同的角度，并修改transform-origin属性来设置元素的旋转中心点。

效果图：

[css] view plain copy

print?

  1. #Heart {
  2. float: left;
  3. position: relative;
  4. }
  5. #Heart:before, #Heart:after {
  6. content: "";
  7. width: 70px;
  8. height: 115px;
  9. position: absolute;
  10. background: red;
  11. left: 70px;
  12. top: 0;
  13. -webkit-border-radius: 50px 50px 0 0;
  14. -moz-border-radius: 50px 50px 0 0;
  15. border-radius: 50px 50px 0 0;
  16. -webkit-transform: rotate(-45deg);
  17. -moz-transform: rotate(-45deg);
  18. -ms-transform: rotate(-45deg);
  19. -o-transform: rotate(-45deg);
  20. transform: rotate(-45deg);
  21. -webkit-transform-origin: 0 100%;
  22. -moz-transform-origin: 0 100%;
  23. -ms-transform-origin: 0 100%;
  24. -o-transform-origin: 0 100%;
  25. transform-origin: 0 100%;
  26. }
  27. #Heart:after {
  28. left: 0;
  29. -webkit-transform: rotate(45deg);
  30. -moz-transform: rotate(45deg);
  31. -ms-transform: rotate(45deg);
  32. -o-transform: rotate(45deg);
  33. transform: rotate(45deg);
  34. -webkit-transform-origin: 100% 100%;
  35. -moz-transform-origin: 100% 100%;
  36. -ms-transform-origin: 100% 100%;
  37. -o-transform-origin: 100% 100%;
  38. transform-origin: 100% 100%;
  39. }

19.蛋形：椭圆形的变体，高度比宽度稍大，设置正确的border-radius属性。

效果图：

[css] view plain copy

print?

  1. #Egg {
  2. width: 100px;
  3. height: 160px;
  4. float: left;
  5. background: #ffb028;
  6. display: block;
  7. -webkit-border-radius: 60px 60px 60px 60px / 100px 100px 68px 68px;
  8. border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  9. }

20.无穷符号：通过border属性和设置伪元素的角度来实现。

效果图：

[css] view plain copy

print?

  1. #Infinity {
  2. width: 220px;
  3. height: 100px;
  4. float: left;
  5. position: relative;
  6. }
  7. #Infinity:before, #Infinity:after {
  8. content: "";
  9. width: 60px;
  10. height: 60px;
  11. position: absolute;
  12. top: 0;
  13. left: 0;
  14. border: 20px solid #008bb0;
  15. -moz-border-radius: 50px 50px 0;
  16. border-radius: 50px 50px 0 50px;
  17. -webkit-transform: rotate(-45deg);
  18. -moz-transform: rotate(-45deg);
  19. -ms-transform: rotate(-45deg);
  20. -o-transform: rotate(-45deg);
  21. transform: rotate(-45deg);
  22. }
  23. #Infinity:after {
  24. left: auto;
  25. right: 0;
  26. -moz-border-radius: 50px 50px 50px 0;
  27. border-radius: 50px 50px 50px 0;
  28. -webkit-transform: rotate(45deg);
  29. -moz-transform: rotate(45deg);
  30. -ms-transform: rotate(45deg);
  31. -o-transform: rotate(45deg);
  32. transform: rotate(45deg);
  33. }

21.消息提示框：一个圆角矩形加左边中间的一个小三角形。

效果图：

[css] view plain copy

print?

  1. #CommentBubble {
  2. width: 140px;
  3. height: 100px;
  4. margin: 30px 20px;
  5. float: left;
  6. background: #8867b9;
  7. position: relative;
  8. -moz-border-radius: 12px;
  9. -webkit-border-radius: 12px;
  10. border-radius: 12px;
  11. }
  12. #CommentBubble:before {
  13. content: "";
  14. width: 0;
  15. height: 0;
  16. right: 100%;
  17. top: 38px;
  18. position: absolute;
  19. border-top: 13px solid transparent;
  20. border-right: 26px solid #8867b9;
  21. border-bottom: 13px solid transparent;
  22. }

22.钻石：上面一个梯形，下面一个三角形组成。

效果图：

[css] view plain copy

print?

  1. #Diamonds{
  2. width: 50px;
  3. height: 0;
  4. float: left;
  5. border-style: solid;
  6. border-color: transparent transparent #9aff02 transparent;
  7. border-width: 0 25px 25px 25px;
  8. position: relative;
  9. margin: 20px 0 50px 0;
  10. }
  11. #Diamonds:after{
  12. width: 0;
  13. height: 0;
  14. top: 25px;
  15. left: -25px;
  16. border-style: solid;
  17. border-color: #9aff02 transparent transparent transparent;
  18. border-width: 70px 50px 0 50px;
  19. position: absolute;
  20. content: "";
  21. }

23.八卦图：多个圆形的组合。

效果图：

[css] view plain copy

print?

  1. #EightDiagrams{
  2. width: 96px;
  3. height: 48px;
  4. margin: 20px 20px;
  5. float: left;
  6. background-color: #ffffff;
  7. border-color: #000000;
  8. border-style: solid;
  9. border-width: 2px 2px 50px 2px;
  10. border-radius: 100%;
  11. position: relative;
  12. }
  13. #EightDiagrams:before {
  14. width: 12px;
  15. height: 12px;
  16. top: 50%;
  17. left: 0;
  18. content: "";
  19. position: absolute;
  20. background-color: #ffffff;
  21. border: 18px solid #000000;
  22. border-radius: 100%;
  23. }
  24. #EightDiagrams:after {
  25. width: 12px;
  26. height: 12px;
  27. top: 50%;
  28. left: 50%;
  29. background-color: #000000;
  30. border: 18px solid #ffffff;
  31. border-radius:100%;
  32. content: "";
  33. position: absolute;
  34. }

24.食豆人：设置border和border-top-left-radius，border-bottom-right-radius等属性。

效果图：

[css] view plain copy

print?

  1. #PacMan {
  2. width: 0;
  3. height: 0;
  4. float: left;
  5. border-right: 60px solid transparent;
  6. border-left: 60px solid #300fed;
  7. border-top: 60px solid #300fed;
  8. border-bottom: 60px solid #300fed;
  9. border-top-left-radius: 60px;
  10. border-top-right-radius: 60px;
  11. border-bottom-left-radius: 60px;
  12. border-bottom-right-radius: 60px;
  13. }

25.扇形：在三角形的基础上，让其中一边成弧形 。

效果图：

[css] view plain copy

print?

  1. #Sector {
  2. width:0;
  3. height:0;
  4. float: left;
  5. background-color: #ffffff;
  6. border-left: 70px solid transparent;
  7. border-right: 70px solid transparent;
  8. border-top: 100px solid #ab9ed1;
  9. border-radius:50%;
  10. }

26.月牙：由两条弧线组成的，每个弧线可以看成一个圆的一部分弧长，在圆的基础上让圆有一个阴影可以形成一个月牙。

效果图：

[css] view plain copy

print?

  1. #CrescentMoon{
  2. width:80px;
  3. height:80px;
  4. float: left;
  5. background-color: #ffffff;
  6. border-radius:50%;
  7. box-shadow: 15px 15px 0 0 #9600d2;
  8. }

27.顶左直角三角形。

效果图：

[css] view plain copy

print?

  1. #TopLeftTriangle {
  2. width: 0px;
  3. height: 0px;
  4. margin: 10px 10px;
  5. float: left;
  6. border-top: 100px solid #7efde1;
  7. border-right: 100px solid transparent;
  8. }

28.顶右直角三角形。

效果图：

[css] view plain copy

print?

  1. #TopRightTriangle {
  2. width: 0px;
  3. height: 0px;
  4. margin: 10px 10px;
  5. float: left;
  6. border-top: 100px solid #400526;
  7. border-left: 100px solid transparent;
  8. }

29.底左直角三角形。

效果图：

[css] view plain copy

print?

  1. #BottomLeftTriangle {
  2. width: 0px;
  3. height: 0px;
  4. margin: 10px 10px;
  5. float: left;
  6. border-bottom: 100px solid #600ffe;
  7. border-right: 100px solid transparent;
  8. }

30.底右直角三角形。

效果图：

[css] view plain copy

print?

  1. #BottomRightTriangle {
  2. width: 0px;
  3. height: 0px;
  4. margin: 10px 10px;
  5. float: left;
  6. border-bottom: 100px solid #ff7578;
  7. border-left: 100px solid transparent;
  8. }

31.八角形。

效果图：

[css] view plain copy

print?

  1. #Burst8 {
  2. width: 80px;
  3. height: 80px;
  4. margin: 10px 10px;
  5. float: left;
  6. background-color: #cf7668;
  7. position: relative;
  8. transform:rotate(20deg);
  9. -webkit-transform:rotate(20deg);
  10. -ms-transform:rotate(20deg);
  11. -moz-transform:rotate(20deg);
  12. -o-transform:rotate(20deg);
  13. }
  14. #Burst8:before{
  15. width: 80px;
  16. height: 80px;
  17. top: 0;
  18. left: 0;
  19. background-color: #cf7668;
  20. position: absolute;
  21. content: "";
  22. transform:rotate(135deg);
  23. -webkit-transform:rotate(135deg);
  24. -ms-transform:rotate(135deg);
  25. -moz-transform:rotate(135deg);
  26. -o-transform:rotate(135deg);
  27. }

32.十二角形。

效果图：

[css] view plain copy

print?

  1. #Burst12 {
  2. width: 80px;
  3. height: 80px;
  4. margin: 20px 20px;
  5. float: left;
  6. background-color: #a8ff26;
  7. position: relative;
  8. text-align: center;
  9. }
  10. #Burst12:before, #Burst12:after{
  11. width: 80px;
  12. height: 80px;
  13. top: 0;
  14. left: 0;
  15. background-color: #a8ff26;
  16. position: absolute;
  17. content: "";
  18. }
  19. #Burst12:before{
  20. transform:rotate(30deg);
  21. -webkit-transform:rotate(30deg);
  22. -ms-transform:rotate(30deg);
  23. -moz-transform:rotate(30deg);
  24. -o-transform:rotate(30deg);
  25. }
  26. #Burst12:after{
  27. transform:rotate(60deg);
  28. -webkit-transform:rotate(60deg);
  29. -ms-transform:rotate(60deg);
  30. -moz-transform:rotate(60deg);
  31. -o-transform:rotate(60deg);
  32. }

完整的CSS3+HTML5代码：BaseGraphCSS3.html

效果图：

[html] view plain copy

print?

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>CSS3实现基本图形</title>
  6. <style>
  7. #Circle{
  8. width:100px;
  9. height:100px;
  10. float: left;
  11. background: #6fee1d;
  12. -moz-border-radius: 50px;
  13. -webkit-border-radius: 50px;
  14. border-radius: 50px;
  15. }
  16. #Oval {
  17. width: 200px;
  18. height: 100px;
  19. float: left;
  20. background: #e9880c;
  21. -webkit-border-radius: 100px / 50px;
  22. -moz-border-radius: 100px / 50px;
  23. border-radius: 100px / 50px;
  24. }
  25. #Triangle {
  26. width: 0;
  27. height: 0;
  28. float: left;
  29. border-bottom: 100px solid #fcf706;
  30. border-left: 50px solid transparent;
  31. border-right: 50px solid transparent;
  32. }
  33. #InvertedTriangle {
  34. width: 0;
  35. height: 0;
  36. float: left;
  37. border-top: 100px solid #30a3bf;
  38. border-left: 50px solid transparent;
  39. border-right: 50px solid transparent;
  40. }
  41. #LeftTriangle {
  42. width: 0;
  43. height: 0;
  44. float: left;
  45. border-top: 50px solid transparent;
  46. border-right: 100px solid #466f20;
  47. border-bottom: 50px solid transparent;
  48. }
  49. #RightTriangle {
  50. width: 0;
  51. height: 0;
  52. float: left;
  53. border-top: 50px solid transparent;
  54. border-left: 100px solid #800820;
  55. border-bottom: 50px solid transparent;
  56. }
  57. #Diamond {
  58. width: 100px;
  59. height: 100px;
  60. float: left;
  61. background: #8e00ff;
  62. /* Rotate */
  63. -webkit-transform: rotate(-45deg);
  64. -moz-transform: rotate(-45deg);
  65. -ms-transform: rotate(-45deg);
  66. -o-transform: rotate(-45deg);
  67. transform: rotate(-45deg);
  68. /* Rotate Origin */
  69. -webkit-transform-origin: 0 100%;
  70. -moz-transform-origin: 0 100%;
  71. -ms-transform-origin: 0 100%;
  72. -o-transform-origin: 0 100%;
  73. transform-origin: 0 100%;
  74. margin: 40px 0 10px 240px;
  75. }
  76. #Trapezium {
  77. height: 0;
  78. width: 100px;
  79. float: left;
  80. border-bottom: 100px solid #dc2500;
  81. border-left: 50px solid transparent;
  82. border-right: 50px solid transparent;
  83. }
  84. #Rectangle {
  85. height: 50px;
  86. width: 100px;
  87. float: left;
  88. background: #afe05d;
  89. }
  90. #Square {
  91. height: 100px;
  92. width: 100px;
  93. float: left;
  94. background: #b02089;
  95. }
  96. #Ring {
  97. width: 100px;
  98. height: 100px;
  99. float: left;
  100. background-color: white;
  101. border-radius: 80px;
  102. border:5px #ffd700 solid;
  103. }
  104. #Parallelogram {
  105. width: 120px;
  106. height: 80px;
  107. float: left;
  108. margin-left: 10px;
  109. -webkit-transform: skew(30deg);
  110. -moz-transform: skew(230deg);
  111. -o-transform: skew(30deg);
  112. transform: skew(30deg);
  113. background-color: #2eda01;
  114. }
  115. #FiveStar {
  116. width: 0;
  117. height: 0;
  118. float: left;
  119. margin: 20px 20px;
  120. color: #ff0012;
  121. position: relative;
  122. display: block;
  123. border-right: 80px solid transparent;
  124. border-bottom: 60px solid #ff0012;
  125. border-left: 80px solid transparent;
  126. -moz-transform: rotate(35deg);
  127. -webkit-transform: rotate(35deg);
  128. -ms-transform: rotate(35deg);
  129. -o-transform: rotate(35deg);
  130. }
  131. #FiveStar:before {
  132. height: 0;
  133. width: 0;
  134. content: ‘‘;
  135. position: absolute;
  136. display: block;
  137. top: -35px;
  138. left: -50px;
  139. border-bottom: 60px solid #ff0012;
  140. border-left: 20px solid transparent;
  141. border-right: 20px solid transparent;
  142. -webkit-transform: rotate(-35deg);
  143. -moz-transform: rotate(-35deg);
  144. -ms-transform: rotate(-35deg);
  145. -o-transform: rotate(-35deg);
  146. }
  147. #FiveStar:after {
  148. width: 0;
  149. height: 0;
  150. content: ‘‘;
  151. position: absolute;
  152. display: block;
  153. top: 3px;
  154. left: -85px;
  155. color: #ff0012;
  156. border-right: 80px solid transparent;
  157. border-bottom: 60px solid #ff0012;
  158. border-left: 80px solid transparent;
  159. -webkit-transform: rotate(-70deg);
  160. -moz-transform: rotate(-70deg);
  161. -ms-transform: rotate(-70deg);
  162. -o-transform: rotate(-70deg);
  163. }
  164. #SixStar{
  165. width: 0;
  166. height: 0;
  167. float: left;
  168. border-left: 50px solid transparent;
  169. border-right: 50px solid transparent;
  170. border-bottom: 100px solid #cfd810;
  171. position: relative;
  172. }
  173. #SixStar:after{
  174. width: 0;
  175. height: 0;
  176. content: "";
  177. border-top: 100px solid #cfd810;
  178. border-left: 50px solid transparent;
  179. border-right: 50px solid transparent;
  180. position: absolute;
  181. top: 30px;
  182. left: -50px;
  183. }
  184. #Pentagon{
  185. width: 60px;
  186. float: left;
  187. position: relative;
  188. border-width: 52px 20px 0;
  189. border-style: solid;
  190. border-color: #711ee2 transparent;
  191. }
  192. #Pentagon:before{
  193. content: "";
  194. position: absolute;
  195. width: 0;
  196. height: 0;
  197. top: -92px;
  198. left: -20px;
  199. border-width: 0 50px 40px;
  200. border-style: solid;
  201. border-color: transparent transparent #711ee2;
  202. }
  203. #Hexagon {
  204. width: 100px;
  205. height: 55px;
  206. float: left;
  207. background: #000001;
  208. position: relative;
  209. margin: 10px auto;
  210. }
  211. #Hexagon:before {
  212. content: "";
  213. width: 0;
  214. height: 0;
  215. position: absolute;
  216. top: -25px;
  217. left: 0;
  218. border-left: 50px solid transparent;
  219. border-right: 50px solid transparent;
  220. border-bottom: 25px solid #000001;
  221. }
  222. #Hexagon:after {
  223. content: "";
  224. width: 0;
  225. height: 0;
  226. position: absolute;
  227. bottom: -25px;
  228. left: 0;
  229. border-left: 50px solid transparent;
  230. border-right: 50px solid transparent;
  231. border-top: 25px solid #000001;
  232. }
  233. #Octagon{
  234. width: 100px;
  235. height: 100px;
  236. float: left;
  237. margin: 10px 10px;
  238. background-color: #66e006;
  239. position: relative;
  240. }
  241. #Octagon:before{
  242. width: 42px;
  243. height: 0;
  244. top: 0;
  245. left: 0;
  246. position: absolute;
  247. content: "";
  248. border-left: 29px solid #ffffff;
  249. border-right: 29px solid #ffffff;
  250. border-bottom: 29px solid #66e006;
  251. }
  252. #Octagon:after{
  253. width: 42px;
  254. height: 0;
  255. left: 0;
  256. bottom: 0;
  257. position: absolute;
  258. content: "";
  259. border-left: 29px solid #ffffff;
  260. border-right: 29px solid #ffffff;
  261. border-top: 29px solid #66e006;
  262. }
  263. #Heart {
  264. float: left;
  265. position: relative;
  266. }
  267. #Heart:before, #Heart:after {
  268. content: "";
  269. width: 70px;
  270. height: 115px;
  271. position: absolute;
  272. background: red;
  273. left: 70px;
  274. top: 0;
  275. -webkit-border-radius: 50px 50px 0 0;
  276. -moz-border-radius: 50px 50px 0 0;
  277. border-radius: 50px 50px 0 0;
  278. -webkit-transform: rotate(-45deg);
  279. -moz-transform: rotate(-45deg);
  280. -ms-transform: rotate(-45deg);
  281. -o-transform: rotate(-45deg);
  282. transform: rotate(-45deg);
  283. -webkit-transform-origin: 0 100%;
  284. -moz-transform-origin: 0 100%;
  285. -ms-transform-origin: 0 100%;
  286. -o-transform-origin: 0 100%;
  287. transform-origin: 0 100%;
  288. }
  289. #Heart:after {
  290. left: 0;
  291. -webkit-transform: rotate(45deg);
  292. -moz-transform: rotate(45deg);
  293. -ms-transform: rotate(45deg);
  294. -o-transform: rotate(45deg);
  295. transform: rotate(45deg);
  296. -webkit-transform-origin: 100% 100%;
  297. -moz-transform-origin: 100% 100%;
  298. -ms-transform-origin: 100% 100%;
  299. -o-transform-origin: 100% 100%;
  300. transform-origin: 100% 100%;
  301. }
  302. #Egg {
  303. width: 100px;
  304. height: 160px;
  305. float: left;
  306. background: #ffb028;
  307. display: block;
  308. -webkit-border-radius: 60px 60px 60px 60px / 100px 100px 68px 68px;
  309. border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  310. }
  311. #Infinity {
  312. width: 220px;
  313. height: 100px;
  314. float: left;
  315. position: relative;
  316. }
  317. #Infinity:before, #Infinity:after {
  318. content: "";
  319. width: 60px;
  320. height: 60px;
  321. position: absolute;
  322. top: 0;
  323. left: 0;
  324. border: 20px solid #008bb0;
  325. -moz-border-radius: 50px 50px 0;
  326. border-radius: 50px 50px 0 50px;
  327. -webkit-transform: rotate(-45deg);
  328. -moz-transform: rotate(-45deg);
  329. -ms-transform: rotate(-45deg);
  330. -o-transform: rotate(-45deg);
  331. transform: rotate(-45deg);
  332. }
  333. #Infinity:after {
  334. left: auto;
  335. right: 0;
  336. -moz-border-radius: 50px 50px 50px 0;
  337. border-radius: 50px 50px 50px 0;
  338. -webkit-transform: rotate(45deg);
  339. -moz-transform: rotate(45deg);
  340. -ms-transform: rotate(45deg);
  341. -o-transform: rotate(45deg);
  342. transform: rotate(45deg);
  343. }
  344. #CommentBubble {
  345. width: 140px;
  346. height: 100px;
  347. margin: 30px 20px;
  348. float: left;
  349. background: #8867b9;
  350. position: relative;
  351. -moz-border-radius: 12px;
  352. -webkit-border-radius: 12px;
  353. border-radius: 12px;
  354. }
  355. #CommentBubble:before {
  356. content: "";
  357. width: 0;
  358. height: 0;
  359. right: 100%;
  360. top: 38px;
  361. position: absolute;
  362. border-top: 13px solid transparent;
  363. border-right: 26px solid #8867b9;
  364. border-bottom: 13px solid transparent;
  365. }
  366. #Diamonds{
  367. width: 50px;
  368. height: 0;
  369. float: left;
  370. border-style: solid;
  371. border-color: transparent transparent #9aff02 transparent;
  372. border-width: 0 25px 25px 25px;
  373. position: relative;
  374. margin: 20px 0 50px 0;
  375. }
  376. #Diamonds:after{
  377. width: 0;
  378. height: 0;
  379. top: 25px;
  380. left: -25px;
  381. border-style: solid;
  382. border-color: #9aff02 transparent transparent transparent;
  383. border-width: 70px 50px 0 50px;
  384. position: absolute;
  385. content: "";
  386. }
  387. #EightDiagrams{
  388. width: 96px;
  389. height: 48px;
  390. margin: 20px 20px;
  391. float: left;
  392. background-color: #ffffff;
  393. border-color: #000000;
  394. border-style: solid;
  395. border-width: 2px 2px 50px 2px;
  396. border-radius: 100%;
  397. position: relative;
  398. }
  399. #EightDiagrams:before {
  400. width: 12px;
  401. height: 12px;
  402. top: 50%;
  403. left: 0;
  404. content: "";
  405. position: absolute;
  406. background-color: #ffffff;
  407. border: 18px solid #000000;
  408. border-radius: 100%;
  409. }
  410. #EightDiagrams:after {
  411. width: 12px;
  412. height: 12px;
  413. top: 50%;
  414. left: 50%;
  415. background-color: #000000;
  416. border: 18px solid #ffffff;
  417. border-radius:100%;
  418. content: "";
  419. position: absolute;
  420. }
  421. #PacMan {
  422. width: 0;
  423. height: 0;
  424. float: left;
  425. border-right: 60px solid transparent;
  426. border-left: 60px solid #300fed;
  427. border-top: 60px solid #300fed;
  428. border-bottom: 60px solid #300fed;
  429. border-top-left-radius: 60px;
  430. border-top-right-radius: 60px;
  431. border-bottom-left-radius: 60px;
  432. border-bottom-right-radius: 60px;
  433. }
  434. #Sector {
  435. width:0;
  436. height:0;
  437. float: left;
  438. background-color: #ffffff;
  439. border-left: 70px solid transparent;
  440. border-right: 70px solid transparent;
  441. border-top: 100px solid #ab9ed1;
  442. border-radius:50%;
  443. }
  444. #CrescentMoon{
  445. width:80px;
  446. height:80px;
  447. float: left;
  448. background-color: #ffffff;
  449. border-radius:50%;
  450. box-shadow: 15px 15px 0 0 #9600d2;
  451. }
  452. #TopLeftTriangle {
  453. width: 0px;
  454. height: 0px;
  455. margin: 10px 10px;
  456. float: left;
  457. border-top: 100px solid #7efde1;
  458. border-right: 100px solid transparent;
  459. }
  460. #TopRightTriangle {
  461. width: 0px;
  462. height: 0px;
  463. margin: 10px 10px;
  464. float: left;
  465. border-top: 100px solid #400526;
  466. border-left: 100px solid transparent;
  467. }
  468. #BottomLeftTriangle {
  469. width: 0px;
  470. height: 0px;
  471. margin: 10px 10px;
  472. float: left;
  473. border-bottom: 100px solid #600ffe;
  474. border-right: 100px solid transparent;
  475. }
  476. #BottomRightTriangle {
  477. width: 0px;
  478. height: 0px;
  479. margin: 10px 10px;
  480. float: left;
  481. border-bottom: 100px solid #ff7578;
  482. border-left: 100px solid transparent;
  483. }
  484. #Burst8 {
  485. width: 80px;
  486. height: 80px;
  487. margin: 10px 10px;
  488. float: left;
  489. background-color: #cf7668;
  490. position: relative;
  491. transform:rotate(20deg);
  492. -webkit-transform:rotate(20deg);
  493. -ms-transform:rotate(20deg);
  494. -moz-transform:rotate(20deg);
  495. -o-transform:rotate(20deg);
  496. }
  497. #Burst8:before{
  498. width: 80px;
  499. height: 80px;
  500. top: 0;
  501. left: 0;
  502. background-color: #cf7668;
  503. position: absolute;
  504. content: "";
  505. transform:rotate(135deg);
  506. -webkit-transform:rotate(135deg);
  507. -ms-transform:rotate(135deg);
  508. -moz-transform:rotate(135deg);
  509. -o-transform:rotate(135deg);
  510. }
  511. #Burst12 {
  512. width: 80px;
  513. height: 80px;
  514. margin: 20px 20px;
  515. float: left;
  516. background-color: #a8ff26;
  517. position: relative;
  518. text-align: center;
  519. }
  520. #Burst12:before, #Burst12:after{
  521. width: 80px;
  522. height: 80px;
  523. top: 0;
  524. left: 0;
  525. background-color: #a8ff26;
  526. position: absolute;
  527. content: "";
  528. }
  529. #Burst12:before{
  530. transform:rotate(30deg);
  531. -webkit-transform:rotate(30deg);
  532. -ms-transform:rotate(30deg);
  533. -moz-transform:rotate(30deg);
  534. -o-transform:rotate(30deg);
  535. }
  536. #Burst12:after{
  537. transform:rotate(60deg);
  538. -webkit-transform:rotate(60deg);
  539. -ms-transform:rotate(60deg);
  540. -moz-transform:rotate(60deg);
  541. -o-transform:rotate(60deg);
  542. }
  543. </style>
  544. </head>
  545. <body>
  546. <!-- 圆形：设置宽度和高度相等，border-radius属性为宽度或高度的一半 -->
  547. <div id="Circle"></div>
  548. <!-- 椭圆形：圆形的变体，高度设置为宽度的一半，border-radius属性为高度除以高度一半 -->
  549. <div id="Oval"></div>
  550. <!-- 三角形：宽度和高度设置为0，border设置左，右边透明，底边可见Solid -->
  551. <div id="Triangle"></div>
  552. <!-- 倒三角形：宽度和高度设置为0，border设置左，右边透明，顶边可见Solid -->
  553. <div id="InvertedTriangle"></div>
  554. <!-- 左三角形：宽度和高度设置为0，border设置上，下边透明，右边可见Solid -->
  555. <div id="LeftTriangle"></div>
  556. <!-- 右三角形：宽度和高度设置为0，border设置上，下边透明，左边可见Solid -->
  557. <div id="RightTriangle"></div>
  558. <!-- 菱形：使用transform和rotate相结合，使两个正反三角形上下显示 -->
  559. <div id="Diamond"></div>
  560. <!-- 梯形：三角形的变体，设置左右两条边相等，并且给它设置一个宽度 -->
  561. <div id="Trapezium"></div>
  562. <!-- 长方形：宽比高长 -->
  563. <div id="Rectangle"></div>
  564. <!-- 浮动Div换行 -->
  565. <div style="clear:both">
  566. <!-- 正方形：宽和高相等 -->
  567. <div id="Square"></div>
  568. <!-- 圆环：在圆形的基础上设置边界，边界颜色与圆形填充颜色不同 -->
  569. <div id="Ring"></div>
  570. <!-- 平行四边形：使用transform使长方形倾斜一个角度 -->
  571. <div id="Parallelogram"></div>
  572. <!-- 五角星：星形的实现方式比较复杂，主要是使用transform属性来旋转不同的边 -->
  573. <div id="FiveStar"></div>
  574. <!-- 六角星：使用transform属性来旋转不同的边 -->
  575. <div id="SixStar"></div>
  576. <!-- 五边形：可以采用三角形和梯形组合 -->
  577. <div id="Pentagon"></div>
  578. <!-- 六边形：在长方形上面和下面各放置一个三角形 -->
  579. <div id="Hexagon"></div>
  580. <!-- 八边形：在长方形上面和下面各放置一个梯形 -->
  581. <div id="Octagon"></div>
  582. <!-- 心形：心形的制作是非常复杂的，可以使用伪元素来制作，分别将伪元素旋转不同的角度，并修改transform-origin属性来设置元素的旋转中心点 -->
  583. <div id="Heart"></div>
  584. <!-- 浮动Div换行 -->
  585. <div style="clear:both">
  586. <!-- 蛋形：椭圆形的变体，高度比宽度稍大，设置正确的border-radius属性 -->
  587. <div id="Egg"></div>
  588. <!-- 无穷符号：通过border属性和设置伪元素的角度来实现 -->
  589. <div id="Infinity"></div>
  590. <!-- 消息提示框：一个圆角矩形加左边中间的一个小三角形 -->
  591. <div id="CommentBubble"></div>
  592. <!-- 钻石：上面一个梯形，下面一个三角形组成 -->
  593. <div id="Diamonds"></div>
  594. <!-- 八卦图：多个圆形的组合-->
  595. <div id="EightDiagrams"></div>
  596. <!-- 食豆人：设置border和border-top-left-radius，border-bottom-right-radius等属性-->
  597. <div id="PacMan"></div>
  598. <!-- 扇形：在三角形的基础上，让其中一边成弧形 -->
  599. <div id="Sector"></div>
  600. <!-- 月牙：由两条弧线组成的，每个弧线可以看成一个圆的一部分弧长，在圆的基础上让圆有一个阴影可以形成一个月牙 -->
  601. <div id="CrescentMoon"></div>
  602. <!-- 浮动Div换行 -->
  603. <div style="clear:both">
  604. <!-- 顶左直角三角形 -->
  605. <div id="TopLeftTriangle"></div>
  606. <!-- 顶右直角三角形 -->
  607. <div id="TopRightTriangle"></div>
  608. <!-- 底左直角三角形 -->
  609. <div id="BottomLeftTriangle"></div>
  610. <!-- 底右直角三角形 -->
  611. <div id="BottomRightTriangle"></div>
  612. <!-- 八角形 -->
  613. <div id="Burst8"></div>
  614. <!-- 十二角形 -->
  615. <div id="Burst12"></div>
  616. </body>
  617. </html>

多角形绘制比较复杂，比如五角星，八角形等。

心形和五角星复杂，但很常用，灵活运用可以使我们的网站更加炫酷。

以后如果遇到其他用CSS直接绘制的图形，会收集补充到这。

文章引用路径：http://blog.csdn.net/wp1603710463/article/details/51180912

时间： 2024-08-02 22:14:08

160419、CSS3实现32种基本图形的相关文章

【转载】CSS3实现32种基本图形

CSS3实现32种基本图形 CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出.直接用CSS3画出这些图形,要比贴图性能更好,体验更加,是一种非常好的网页美观方式. 这32种图形分别为圆形,椭圆形,三角形,倒三角形,左三角形,右三角形,菱形,梯形,长方形,正方形,圆环,平行四边形,五角星,六角星,五边形,六边形,八边形,心形,蛋形,无穷符号,消息提示框,钻石,八卦图,食豆人,扇形,月牙,顶左直角三角形,顶右直角三角形 ,底左直角三角形 ,底右直角三角形 ,八角形,十二角形.网页代码中

CSS3实现32种基本图形

CSS3实现32种基本图形      CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出.直接用CSS3画出这些图形,要比贴图性能更好,体验更加,是一种非常好的网页美观方式. 这32种图形分别为圆形,椭圆形,三角形,倒三角形,左三角形,右三角形,菱形,梯形,长方形,正方形,圆环,平行四边形,五角星,六角星,五边形,六边形,八边形,心形,蛋形,无穷符号,消息提示框,钻石,八卦图,食豆人,扇形,月牙,顶左直角三角形,顶右直角三角形 ,底左直角三角形 ,底右直角三角形 ,八角形, 十二角形

纯css3样式属性制作各种图形图标

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 <head> 4 <meta http-equiv="

display的32种写法--摘抄

你知道『回』字有四种写法,但你知道display有32种写法吗?今天我们一一道来,让你一次性完全掌握display,从此再也不用对它发愁. 从大的分类来讲,display的32种写法可以分为6个大类,再加上1个全局类,一共是七大类: ?外部值 ?内部值 ?列表值 ?属性值 ?显示值 ?混合值 ?全局值 外部值 所谓外部值,就是说这些值只会直接影响一个元素的外部表现,而不影响元素里面的儿子级孙子级元素的表现. display: block; 这个值大家不陌生,我们最熟悉的<div>缺省就是这个值

display的32种写法

你知道『回』字有四种写法,但你知道display有32种写法吗?今天我们一一道来,让你一次性完全掌握display,从此再也不用对它发愁. 从大的分类来讲,display的32种写法可以分为6个大类,再加上1个全局类,一共是七大类: ?外部值 ?内部值 ?列表值 ?属性值 ?显示值 ?混合值 ?全局值 外部值 所谓外部值,就是说这些值只会直接影响一个元素的外部表现,而不影响元素里面的儿子级孙子级元素的表现. display: block; 这个值大家不陌生,我们最熟悉的<div>缺省就是这个值

CSS3实现8种Loading效果【二】

CSS3实现8种Loading效果[二] 今晚吃完饭回宿舍又捣鼓了另外几种Loading效果,老规矩,直接“上菜“…… 注:gif图片动画有些卡顿,非实际效果! 第一种效果: 代码如下: <div class="loading"> <span></span> <span></span> <span></span> <span></span> <span></sp

设计模式（java的32种设计模式）

转自:leshui http://blog.csdn.net/leshui/article/details/11951 在java版看见了这篇文章,作者以轻松的语言比喻了java的32种模式,有很好的启发作用,但可惜没有给出具体的意思,我就在后边加上了:)这些都是最简单的介绍,要学习的话建议你看一下<java与模式>这本书. 创建型模式 1.FACTORY—追MM少不了请吃饭了,麦当劳的鸡翅和肯德基的鸡翅都是MM爱吃的东西,虽然口味有所不同,但不管你带MM去麦当劳或肯德基,只管向服务员说“来四

趣谈 32 种设计模式

32种设计模式趣谈 好东西不得不转 在网上看见了这篇文章,作者以轻松的语言比喻了java的32种模式,有很好的启发作用. 创建型模式 1.FACTORY-追MM少不了请吃饭了,麦当劳的鸡翅和肯德基的鸡翅都是MM爱吃的东西,虽然口味有所不同,但不管你带MM去麦当劳或肯德基,只管向服务员说"来四个鸡翅"就行了.麦当劳和肯德基就是生产鸡翅的Factory 工厂模式:客户类和工厂类分开.消费者任何时候需要某种产品,只需向工厂请求即可.消费者无须修改就可以接纳新产品.缺点是当产品修改时,工厂类也

CSS3实现10种Loading效果

原文:CSS3实现10种Loading效果 昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记…… 第1种效果: 代码如下: <div class="loading"> <span></span> <span></span> <span></span> <span></span> <span></span> &