码迷，mamicode.com
首页 > Web开发 > 详细

【01】CSS制作的图形

时间：2015-11-17 12:53:45      阅读：158      评论：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年07月29日 (22)
    2021年07月28日 (40)
    2021年07月27日 (32)
    2021年07月26日 (79)
    2021年07月23日 (29)
    2021年07月22日 (30)
    2021年07月21日 (42)
    2021年07月20日 (16)
    2021年07月19日 (90)
    2021年07月16日 (35)
    周排行
    mamicode.com排行更多图片
    更多
    友情链接
    兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
    关于我们 - 联系我们 - 留言反馈
    © 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
    迷上了代码！