首页 > Web开发 > 详细

【01】CSS制作的图形

时间：2015-11-17 12:53:34      阅读：426      评论：0      收藏：0      [点我收藏+]
【01】CSS制作的图形
技术分享

绘制五角星：

技术分享
通过border绘制三角形。然后通过transfrom来旋转35度。
绘制对称的图形，最后绘制顶部的三角形即可。

元素本身，加上：before和：after。


绘制爱心：

技术分享



矩形，加圆角，加旋转。

绘制倒8：


技术分享


显然是：三个角是圆角。然后旋转。


绘制开心笑：
技术分享

四个角圆角。然后右border-right为透明即可。


代码如下：

  1. <!DOCTYPE HTML>
  2. <html>
  4. <head>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6.     <title>测试</title>
  7.     <style type="text/css">
  8.     * {
  9.         margin: 0;
  10.         padding: 0;
  11.         border: 0;
  12.     }
  13.     
  14.     .wrap {
  15.         position: absolute;
  16.     }
  17.     
  18.     .arrow {
  19.         position: relative;
  20.         width: 0;
  21.         height: 0;
  22.         border-top: 9px solid transparent;
  23.         border-right: 9px solid #000;
  24.         -webkit-transform: rotate(10deg);
  25.         -moz-transform: rotate(10deg);
  26.         -ms-transform: rotate(10deg);
  27.         -o-transform: rotate(10deg);
  28.     }
  29.     
  30.     .arrow:after {
  31.         content: "";
  32.         position: absolute;
  33.         border: 0 solid transparent;
  34.         border-top: 3px solid #000;
  35.         border-radius: 20px 0 0 0;
  36.         top: -12px;
  37.         left: -9px;
  38.         width: 12px;
  39.         height: 12px;
  40.         -webkit-transform: rotate(45deg);
  41.         -moz-transform: rotate(45deg);
  42.         -ms-transform: rotate(45deg);
  43.         -o-transform: rotate(45deg);
  44.     }
  45.     
  46.     .star-six {
  47.         width: 0;
  48.         height: 0;
  49.         border-left: 50px solid transparent;
  50.         border-right: 50px solid transparent;
  51.         border-bottom: 100px solid #99CC33;
  52.         position: relative;
  53.     }
  54.     
  55.     .star-six:after {
  56.         width: 0;
  57.         height: 0;
  58.         border-left: 50px solid transparent;
  59.         border-right: 50px solid transparent;
  60.         border-top: 100px solid #99CC33;
  61.         position: absolute;
  62.         content: "";
  63.         top: 30px;
  64.         left: -50px;
  65.     }
  66.     
  67.     .star-five {
  68.         margin: 50px 0;
  69.         position: relative;
  70.         display: block;
  71.         color: #0066CC;
  72.         width: 0px;
  73.         height: 0px;
  74.         border-right: 100px solid transparent;
  75.         border-bottom: 70px solid #0066CC;
  76.         border-left: 100px solid transparent;
  77.         -moz-transform: rotate(35deg);
  78.         -webkit-transform: rotate(35deg);
  79.         -ms-transform: rotate(35deg);
  80.         -o-transform: rotate(35deg);
  81.     }
  82.     
  83.     .star-five:before {
  84.         border-bottom: 80px solid #0066CC;
  85.         border-left: 30px solid transparent;
  86.         border-right: 30px solid transparent;
  87.         position: absolute;
  88.         height: 0;
  89.         width: 0;
  90.         top: -45px;
  91.         left: -65px;
  92.         display: block;
  93.         content: ‘‘;
  94.         -webkit-transform: rotate(-35deg);
  95.         -moz-transform: rotate(-35deg);
  96.         -ms-transform: rotate(-35deg);
  97.         -o-transform: rotate(-35deg);
  98.     }
  99.     
  100.     .star-five:after {
  101.         position: absolute;
  102.         display: block;
  103.         color: #0066CC;
  104.         top: 3px;
  105.         left: -105px;
  106.         width: 0px;
  107.         height: 0px;
  108.         border-right: 100px solid transparent;
  109.         border-bottom: 70px solid #0066CC;
  110.         border-left: 100px solid transparent;
  111.         -webkit-transform: rotate(-70deg);
  112.         -moz-transform: rotate(-70deg);
  113.         -ms-transform: rotate(-70deg);
  114.         -o-transform: rotate(-70deg);
  115.         content: ‘‘;
  116.     }
  117.     
  118.     .heart {
  119.         position: relative;
  120.         width: 100px;
  121.         height: 90px;
  122.     }
  123.     
  124.     .heart:before,
  125.     .heart:after {
  126.         position: absolute;
  127.         content: "";
  128.         left: 50px;
  129.         top: 0;
  130.         width: 50px;
  131.         height: 80px;
  132.         background: red;
  133.         -moz-border-radius: 50px 50px 0 0;
  134.         border-radius: 50px 50px 0 0;
  135.         -webkit-transform: rotate(-45deg);
  136.         -moz-transform: rotate(-45deg);
  137.         -ms-transform: rotate(-45deg);
  138.         -o-transform: rotate(-45deg);
  139.         transform: rotate(-45deg);
  140.         -webkit-transform-origin: 0 100%;
  141.         -moz-transform-origin: 0 100%;
  142.         -ms-transform-origin: 0 100%;
  143.         -o-transform-origin: 0 100%;
  144.         transform-origin: 0 100%;
  145.     }
  146.     
  147.     .heart:after {
  148.         left: 0;
  149.         -webkit-transform: rotate(45deg);
  150.         -moz-transform: rotate(45deg);
  151.         -ms-transform: rotate(45deg);
  152.         -o-transform: rotate(45deg);
  153.         transform: rotate(45deg);
  154.         -webkit-transform-origin: 100% 100%;
  155.         -moz-transform-origin: 100% 100%;
  156.         -ms-transform-origin: 100% 100%;
  157.         -o-transform-origin: 100% 100%;
  158.         transform-origin: 100% 100%;
  159.     }
  160.     
  161.     .infinity {
  162.         position: relative;
  163.         width: 212px;
  164.         height: 100px;
  165.     }
  166.     
  167.     .infinity:before,
  168.     .infinity:after {
  169.         content: "";
  170.         position: absolute;
  171.         top: 0;
  172.         left: 0;
  173.         width: 60px;
  174.         height: 60px;
  175.         border: 20px solid #FF33CC;
  176.         -moz-border-radius: 50px 50px 0 50px;
  177.         border-radius: 50px 50px 0 50px;
  178.         -webkit-transform: rotate(-45deg);
  179.         -moz-transform: rotate(-45deg);
  180.         -ms-transform: rotate(-45deg);
  181.         -o-transform: rotate(-45deg);
  182.         transform: rotate(-45deg);
  183.     }
  184.     
  185.     .infinity:after {
  186.         left: auto;
  187.         right: 0;
  188.         -moz-border-radius: 50px 50px 50px 0;
  189.         border-radius: 50px 50px 50px 0;
  190.         -webkit-transform: rotate(45deg);
  191.         -moz-transform: rotate(45deg);
  192.         -ms-transform: rotate(45deg);
  193.         -o-transform: rotate(45deg);
  194.         transform: rotate(45deg);
  195.     }
  196.     
  197.     .pacman {
  198.         width: 0px;
  199.         height: 0px;
  200.         border-right: 60px solid transparent;
  201.         border-top: 60px solid #FFCC00;
  202.         border-left: 60px solid #FFCC00;
  203.         border-bottom: 60px solid #FFCC00;
  204.         border-top-left-radius: 60px;
  205.         border-top-right-radius: 60px;
  206.         border-bottom-left-radius: 60px;
  207.         border-bottom-right-radius: 60px;
  208.     }
  209.     
  210.     .yin-yang {
  211.         width: 96px;
  212.         height: 48px;
  213.         background: #fff;
  214.         border-color: #000;
  215.         border-style: solid;
  216.         border-width: 2px 2px 50px 2px;
  217.         border-radius: 100%;
  218.         position: relative;
  219.     }
  220.     
  221.     .yin-yang:before {
  222.         content: "";
  223.         position: absolute;
  224.         top: 50%;
  225.         left: 0;
  226.         background: #fff;
  227.         border: 18px solid #000;
  228.         border-radius: 100%;
  229.         width: 12px;
  230.         height: 12px;
  231.     }
  232.     
  233.     .yin-yang:after {
  234.         content: "";
  235.         position: absolute;
  236.         top: 50%;
  237.         left: 50%;
  238.         background: #000;
  239.         border: 18px solid #fff;
  240.         border-radius: 100%;
  241.         width: 12px;
  242.         height: 12px;
  243.     }
  244.     </style>
  245. </head>
  247. <body>
  248.     <div class="wrap" style="top:30px; left:40px;">
  249.         <div class="arrow"></div>
  250.     </div>
  251.     <div class="wrap" style="top:20px; left:100px;">
  252.         <div class="star-six"></div>
  253.     </div>
  254.     <div class="wrap" style="top:20px; left:200px;">
  255.         <div class="star-five"></div>
  256.     </div>
  257.     <div class="wrap" style="top:20px; left:400px;">
  258.         <div class="heart"></div>
  259.     </div>
  260.     <div class="wrap" style="top:220px; left:100px;">
  261.         <div class="infinity"></div>
  262.     </div>
  263.     <div class="wrap" style="top:220px; left:400px;">
  264.         <div class="pacman"></div>
  265.     </div>
  266.     <div class="wrap" style="top:340px; left:200px;">
  267.         <div class="yin-yang"></div>
  268.     </div>
  269. </body>
  271. </html>






附件列表

     

    【01】CSS制作的图形

    原文：http://www.cnblogs.com/moyuling/p/4971108.html
    踩
    (0)
    赞
    (0)
       
    举报
    评论 一句话评论（0）
    分享档案
    更多>
    2021年09月23日 (328)
    2021年09月24日 (313)
    2021年09月17日 (191)
    2021年09月15日 (369)
    2021年09月16日 (411)
    2021年09月13日 (439)
    2021年09月11日 (398)
    2021年09月12日 (393)
    2021年09月10日 (160)
    2021年09月08日 (222)
    最新文章
    更多>
    教程昨日排行
    更多>
    友情链接
    汇智网   PHP教程   插件网  
    关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
    © 2014 bubuko.com 版权所有
    打开技术之扣，分享程序人生！