zoukankan      html  css  js  c++  java

  • 使用纯CSS画多边形

    在做网页过程中想到了需要使用扇形图形来完成一些功能，第一印象就是使用CSS来完成。

    经过查资料发现了transform 的skew()正好合适且使用方便

    例子代码：

     1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>CSS 画扇形</title>
 6     <style type="text/css">
 7     .sector{
 8         height: 200px;
 9         width: 200px;
10         overflow:hidden;
11         transform-origin: 0 100%;
12         transform: skew(-50deg);
13         position: relative;
14         background: #cccccc;
15     }
16     .sector:before{
17         height:inherit;
18         width: inherit;
19         position: absolute;
20         content: "";
21         border-radius: 0 200px 0 0;
22         background: #fecb2f;
23         transform-origin: 0 100%;
24         transform: skew(50deg);
25     }
26     </style>
27 </head>
28 <body>
29 <div class="sector"></div>
30 </body>
31 </html>

    1、正方形

     CSS代码如下：


    #square { 
    100px; 
    height: 100px; 
    background: red; 
    } 

    2、长方形

     CSS代码如下：

    #rectangle { 
    200px; 
    height: 100px; 
    background: red; 
    } 

    3、圆形

     

     CSS代码如下：

    #circle { 
    100px; 
    height: 100px; 
    background: red; 
    -moz-border-radius: 50px; 
    -webkit-border-radius: 50px; 
    border-radius: 50px; 
    } 

    4、椭圆

     CSS代码如下：

    #oval { 
    200px; 
    height: 100px; 
    background: red; 
    -moz-border-radius: 100px / 50px; 
    -webkit-border-radius: 100px / 50px; 
    border-radius: 100px / 50px; 
    } 

    5、上三角

    CSS代码如下：

    #triangle-up { 
    0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-bottom: 100px solid red; 
    } 

    6、下三角

     CSS代码如下：

    #triangle-down { 
    0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-top: 100px solid red; 
    } 

    7、左三角

     CSS代码如下：


    #triangle-left { 
    0; 
    height: 0; 
    border-top: 50px solid transparent; 
    border-right: 100px solid red; 
    border-bottom: 50px solid transparent; 
    } 

    8、右三角

     CSS代码如下：

    #triangle-right { 
    0; 
    height: 0; 
    border-top: 50px solid transparent; 
    border-left: 100px solid red; 
    border-bottom: 50px solid transparent; 
    } 

    9、左上三角

     CSS代码如下：

    #triangle-topleft { 
    0; 
    height: 0; 
    border-top: 100px solid red; 
    border-right: 100px solid transparent; 
    } 

    10、右上三角

     CSS代码如下：



    #triangle-topright { 
    0; 
    height: 0; 
    border-top: 100px solid red; 
    border-left: 100px solid transparent; 
    } 

    11、左下三角

     

     CSS代码如下：

    #triangle-bottomleft { 
    0; 
    height: 0; 
    border-bottom: 100px solid red; 
    border-right: 100px solid transparent; 
    } 

    12、右下三角

     CSS代码如下：



    #triangle-bottomright { 
    0; 
    height: 0; 
    border-bottom: 100px solid red; 
    border-left: 100px solid transparent; 
    } 

    13、平行四边形

     CSS代码如下：


    #parallelogram { 
    150px; 
    height: 100px; 
    margin-left:20px; 
    -webkit-transform: skew(20deg); 
    -moz-transform: skew(20deg); 
    -o-transform: skew(20deg); 
    background: red; 
    } 

    14、梯形

     CSS代码如下：

    #trapezoid { 
    border-bottom: 100px solid red; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    height: 0; 
    100px; 
    } 

    15、六角星

     CSS代码如下：

    #star-six { 
    0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-bottom: 100px solid red; 
    position: relative; 
    } 
    #star-six:after { 
    0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-top: 100px solid red; 
    position: absolute; 
    content: ""; 
    top: 30px; 
    left: -50px; 
    } 

    16、五角星

     CSS代码如下：

    #star-five { 
    margin: 50px 0; 
    position: relative; 
    display: block; 
    color: red; 
    0px; 
    height: 0px; 
    border-right: 100px solid transparent; 
    border-bottom: 70px solid red; 
    border-left: 100px solid transparent; 
    -moz-transform: rotate(35deg); 
    -webkit-transform: rotate(35deg); 
    -ms-transform: rotate(35deg); 
    -o-transform: rotate(35deg); 
    } 
    #star-five:before { 
    border-bottom: 80px solid red; 
    border-left: 30px solid transparent; 
    border-right: 30px solid transparent; 
    position: absolute; 
    height: 0; 
    0; 
    top: -45px; 
    left: -65px; 
    display: block; 
    content: ''; 
    -webkit-transform: rotate(-35deg); 
    -moz-transform: rotate(-35deg); 
    -ms-transform: rotate(-35deg); 
    -o-transform: rotate(-35deg); 
    } 
    #star-five:after { 
    position: absolute; 
    display: block; 
    color: red; 
    top: 3px; 
    left: -105px; 
    0px; 
    height: 0px; 
    border-right: 100px solid transparent; 
    border-bottom: 70px solid red; 
    border-left: 100px solid transparent; 
    -webkit-transform: rotate(-70deg); 
    -moz-transform: rotate(-70deg); 
    -ms-transform: rotate(-70deg); 
    -o-transform: rotate(-70deg); 
    content: ''; 
    } 

    17、五角大楼

     

     CSS代码如下：


    #pentagon { 
    position: relative; 
    54px; 
    border- 50px 18px 0; 
    border-style: solid; 
    border-color: red transparent; 
    } 
    #pentagon:before { 
    content: ""; 
    position: absolute; 
    height: 0; 
    0; 
    top: -85px; 
    left: -18px; 
    border- 0 45px 35px; 
    border-style: solid; 
    border-color: transparent transparent red; 
    } 

    18、六边形

     CSS代码如下：


    #hexagon { 
    100px; 
    height: 55px; 
    background: red; 
    position: relative; 
    } 
    #hexagon:before { 
    content: ""; 
    position: absolute; 
    top: -25px; 
    left: 0; 
    0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-bottom: 25px solid red; 
    } 
    #hexagon:after { 
    content: ""; 
    position: absolute; 
    bottom: -25px; 
    left: 0; 
    0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-top: 25px solid red; 
    } 

    19、八角形

     CSS代码如下：


    #octagon { 
    100px; 
    height: 100px; 
    background: red; 
    position: relative; 
    } 
    #octagon:before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    border-bottom: 29px solid red; 
    border-left: 29px solid #eee; 
    border-right: 29px solid #eee; 
    42px; 
    height: 0; 
    } 
    #octagon:after { 
    content: ""; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    border-top: 29px solid red; 
    border-left: 29px solid #eee; 
    border-right: 29px solid #eee; 
    42px; 
    height: 0; 
    } 

    20、爱心

     CSS代码如下：


    #heart { 
    position: relative; 
    100px; 
    height: 90px; 
    } 
    #heart:before, 
    #heart:after { 
    position: absolute; 
    content: ""; 
    left: 50px; 
    top: 0; 
    50px; 
    height: 80px; 
    background: red; 
    -moz-border-radius: 50px 50px 0 0; 
    border-radius: 50px 50px 0 0; 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
    -webkit-transform-origin: 0 100%; 
    -moz-transform-origin: 0 100%; 
    -ms-transform-origin: 0 100%; 
    -o-transform-origin: 0 100%; 
    transform-origin: 0 100%; 
    } 
    #heart:after { 
    left: 0; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    transform: rotate(45deg); 
    -webkit-transform-origin: 100% 100%; 
    -moz-transform-origin: 100% 100%; 
    -ms-transform-origin: 100% 100%; 
    -o-transform-origin: 100% 100%; 
    transform-origin :100% 100%; 
    } 

    21、无穷大符号

     

    CSS代码如下：


    #infinity { 
    position: relative; 
    212px; 
    height: 100px; 
    } 
    #infinity:before, 
    #infinity:after { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    60px; 
    height: 60px; 
    border: 20px solid red; 
    -moz-border-radius: 50px 50px 0 50px; 
    border-radius: 50px 50px 0 50px; 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
    } 
    #infinity:after { 
    left: auto; 
    right: 0; 
    -moz-border-radius: 50px 50px 50px 0; 
    border-radius: 50px 50px 50px 0; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    transform: rotate(45deg); 
    } 

    22、鸡蛋

     CSS代码如下：

     

    #egg { 
    display:block; 
    126px; 
    height: 180px; 
     
    -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; 
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; 
    } 

    23、食逗人（Pac-Man）

     CSS代码如下：

     

    #pacman { 
    0px; 
    height: 0px; 
    border-right: 60px solid transparent; 
    border-top: 60px solid red; 
    border-left: 60px solid red; 
    border-bottom: 60px solid red; 
    border-top-left-radius: 60px; 
    border-top-right-radius: 60px; 
    border-bottom-left-radius: 60px; 
    border-bottom-right-radius: 60px; 
    } 

    24、提示对话框

     CSS代码如下：



    #talkbubble { 
    120px; 
    height: 80px; 
    background: red; 
    position: relative; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    } 
    #talkbubble:before { 
    content:""; 
    position: absolute; 
    right: 100%; 
    top: 26px; 
    0; 
    height: 0; 
    border-top: 13px solid transparent; 
    border-right: 26px solid red; 
    border-bottom: 13px solid transparent; 
    } 

    25、12角星

     CSS代码如下：


    #burst-12 { 
    background: red; 
    80px; 
    height: 80px; 
    position: relative; 
    text-align: center; 
    } 
    #burst-12:before, #burst-12:after { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 80px; 
    80px; 
    background: red; 
    } 
    #burst-12:before { 
    -webkit-transform: rotate(30deg); 
    -moz-transform: rotate(30deg); 
    -ms-transform: rotate(30deg); 
    -o-transform: rotate(30deg); 
    transform: rotate(30deg); 
    } 
    #burst-12:after { 
    -webkit-transform: rotate(60deg); 
    -moz-transform: rotate(60deg); 
    -ms-transform: rotate(60deg); 
    -o-transform: rotate(60deg); 
    transform: rotate(60deg); 
    } 

    26、8角星

     CSS代码如下：



    #burst-8 { 
    background: red; 
    80px; 
    height: 80px; 
    position: relative; 
    text-align: center; 
    -webkit-transform: rotate(20deg); 
    -moz-transform: rotate(20deg); 
    -ms-transform: rotate(20deg); 
    -o-transform: rotate(20eg); 
    transform: rotate(20deg); 
    } 
    #burst-8:before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 80px; 
    80px; 
    background: red; 
    -webkit-transform: rotate(135deg); 
    -moz-transform: rotate(135deg); 
    -ms-transform: rotate(135deg); 
    -o-transform: rotate(135deg); 
    transform: rotate(135deg); 
    } 

    27、钻石

     CSS代码如下：



    #cut-diamond { 
    border-style: solid; 
    border-color: transparent transparent red transparent; 
    border- 0 25px 25px 25px; 
    height: 0; 
    50px; 
    position: relative; 
    margin: 20px 0 50px 0; 
    } 
    #cut-diamond:after { 
    content: ""; 
    position: absolute; 
    top: 25px; 
    left: -25px; 
    0; 
    height: 0; 
    border-style: solid; 
    border-color: red transparent transparent transparent; 
    border- 70px 50px 0 50px; 
    } 

    28、阴阳八卦（霸气的这个）

    代码如下:

    #yin-yang { 
    96px; 
    height: 48px; 
    background: #eee; 
    border-color: red; 
    border-style: solid; 
    border- 2px 2px 50px 2px; 
    border-radius: 100%; 
    position: relative; 
    } 
    #yin-yang:before { 
    content: ""; 
    position: absolute; 
    top: 50%; 
    left: 0; 
    background: #eee; 
    border: 18px solid red; 
    border-radius: 100%; 
    12px; 
    height: 12px; 
    } 
    #yin-yang:after { 
    content: ""; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    background: red; 
    border: 18px solid #eee; 
    border-radius:100%; 
    12px; 
    height: 12px; 
    } 

    好了，就到这里了，一共28个，个人觉得后面几个比较犀利。这些代码的来源是css-tricks。

    转载自：http://www.itivy.com/ivy/archive/2012/1/16/css-shape.html
  • 相关阅读:
    xamarin.Android ImageView 图片圆角（自定义属性、扩展控件）
    Protobuf简介
    创建高性能索引
    缓存表和汇总表
    Schema与数据类型优化
    香农理论在密码学中的应用
    传统密码技术
    自组织神经网络模型与学习算法
    径向基函数神经网络模型与学习算法
    BP神经网络模型与学习算法
  • 原文地址：https://www.cnblogs.com/Bideam/p/6830552.html
Copyright © 2011-2022 走看看