微信小程序样式三角形搭建

深藏阁楼爱情的钟 2022-05-29 14:00 587阅读 0赞

直接上代码：

.pledgecont::before \{

content: '';

width: 0;

height: 0;

border-bottom: 14px solid \#fff;

border-left: 8px solid transparent;

border-right: 8px solid transparent;

position: absolute;

top: \-14px;

left: 37.5%;

看出来了吗？这里构造了一个三角形，真的很神奇。

一个长和宽都为0的容器，设置border的四个边就可以实现不同的三角形，挺佩服css样式的。

以上例子中配置border-bottom有颜色，其余的都是transparent，因此这是一个正三角形。

其实神奇的事情还多，看到除了三角形外，很多形状都可以，因此也摘抄过来了，神奇的css。

如下：

这些代码的来源是[css-tricks][]。原文链接： [http://www.itivy.com/ivy/archive/2012/1/16/css-shape.html][http_www.itivy.com_ivy_archive_2012_1_16_css-shape.html]

### 1、圆形 ###

[![image][]][image 1]

CSS代码如下：宽高一样，border-radius设为宽高的一半

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

### 2、椭圆 ###

[![image][image 2]][image_image 2]

CSS代码如下：border-radius:水平半径/垂直半径

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

### 3、等边三角 ###

[![image][image 3]][image_image 3][![image][image 4]][image_image 4][![image][image 5]][image_image 5][![image][image 6]][image_image 6]

上三角CSS代码如下：设置border-bottom宽度实线颜色，左右border左右宽度为一半，实线透明。下三角、左三角、右三角可举一反三实现。

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

### 4、直角三角 ###

[![image][image 7]][image_image 7]![image][image 8]![image][image 9]![image][image 10]

左上三角CSS代码如下：border-top设置宽度实线颜色，border-right等宽实线透明。右上三角、左下三角、右下三角可举一反三实现。

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

### 5、平行四边形 ###

[![image][image 11]][image_image 11]

CSS代码如下：transform: skew，倾斜角度即为四边形锐角的余角

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

### 6、梯形 ###

[![image][image 12]][image_image 12]

CSS代码如下：上底长为width的值，下底长为width+border-left+border-right之和，高为border-bottom

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

### 7、五边形（五角大楼） ###

[![image][image 13]][image_image 13]

CSS代码如下：

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

### 8、六边形 ###

[![image][image 14]][image_image 14]

CSS代码如下：

#hexagon {
        width: 100px;
        height: 55px;
        background: red;
        position: relative;
    }
    #hexagon:before {
        content: "";
        position: absolute;
        top: -25px; 
        left: 0;
        width: 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;
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 25px solid red;
    }

### 9、八边形 ###

[![image][image 15]][image_image 15]

CSS代码如下：

#octagon {
        width: 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;
        width: 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;
        width: 42px;
        height: 0;
    }

### 10、五角星 ###

[![image][image 16]][image_image 16]

CSS代码如下：

#star-five {
       margin: 50px 0;
       position: relative;
       display: block;
       color: red;
       width: 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;
       width: 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;
       width: 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: '';
    }

### 11、六角星 ###

[![image][image 17]][image_image 17]

CSS代码如下：一个上三角和一个下三角拼合而成

#star-six {
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 100px solid red;
        position: relative;
    }
    #star-six:after {
        width: 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;
    }

### 12、八角星 ###

[![image][image 18]][image_image 18]

CSS代码如下：

#burst-8 {
        background: red;
        width: 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;
        width: 80px;
        background: red;
        -webkit-transform: rotate(135deg);
           -moz-transform: rotate(135deg);
            -ms-transform: rotate(135deg);
             -o-transform: rotate(135deg);
                transform: rotate(135deg);
    }

### 13、十二角星 ###

[![image][image 19]][image_image 19]

CSS代码如下：

#burst-12 {
        background: red;
        width: 80px;
        height: 80px;
        position: relative;
        text-align: center;
    }
    #burst-12:before, #burst-12:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 80px;
        width: 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);
    }

### 14、爱心 ###

[![image][image 20]][image_image 20]

CSS代码如下：

#heart {
        position: relative;
        width: 100px;
        height: 90px;
    }
    #heart:before,
    #heart:after {
        position: absolute;
        content: "";
        left: 50px;
        top: 0;
        width: 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%;
    }

### 15、无穷大符号 ###

[![image][image 21]][image_image 21]

CSS代码如下：

#infinity {
        position: relative;
        width: 212px;
        height: 100px;
    }
     
    #infinity:before,
    #infinity:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 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);
    }

### 16、鸡蛋 ###

[![image][image 22]][image_image 22]

CSS代码如下：

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

### 17、食豆人（Pac-Man） ###

CSS代码如下：

#pacman {
      width: 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;
    }

### 18、提示对话框 ###

[![image][image 23]][image_image 23]

CSS代码如下：

#talkbubble {
       width: 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;
       width: 0;
       height: 0;
       border-top: 13px solid transparent;
       border-right: 26px solid red;
       border-bottom: 13px solid transparent;
    }

### 19、钻石 ###

[![image][image 24]][image_image 24]

CSS代码如下：

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

### 20、阴阳八卦 ###

[![image][image 25]][image_image 25]

CSS代码如下：

#yin-yang {
        width: 96px;
        height: 48px;
        background: #eee;
        border-color: red;
        border-style: solid;
        border-width: 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%;
        width: 12px;
        height: 12px;
    }
     
    #yin-yang:after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        background: red;
        border: 18px solid #eee;
        border-radius:100%;
        width: 12px;
        height: 12px;
    }

[css-tricks]: http://css-tricks.com/examples/ShapesOfCSS/
[http_www.itivy.com_ivy_archive_2012_1_16_css-shape.html]: http://www.itivy.com/ivy/archive/2012/1/16/css-shape.html
[image]: /images/20220529/0594388e466f4deb8fbc98aed6ab4bd7.png
[image 1]: http://images.cnblogs.com/cnblogs_com/sxwgf/201201/201201170833149707.png
[image 2]: http://images.cnblogs.com/cnblogs_com/sxwgf/201201/201201170833153752.png
[image_image 2]: /images/20220529/f7ea150d4ddb47329fe9c278b296051a.png
[image 3]: http://images.cnblogs.com/cnblogs_com/sxwgf/201201/20120117083315131.png
[image_image 3]: http://images.cnblogs.com/cnblogs_com/sxwgf/201201/201201170833158736.png
[image 4]: http://images.cnblogs.com/cnblogs_com/sxwgf/201201/201201170833166510.png
[image_image 4]: http://images.cnblogs.com/cnblogs_com/sxwgf/201201/201201170833165115.png
[image 5]: http://images.cnblogs.com/cnblogs_com/sxwgf/201201/201201170833168113.png
[image_image 5]: http://images.cnblogs.com/cnblogs_com/sxwgf/201201/201201170833163130.png
[image 6]: http://images.cnblogs.com/cnblogs_com/sxwgf/201201/201201170833164492.png
[image_image 6]: /images/20220529/5dc2d3db02ba4c8482320e09b8cb0eee.png
[image 7]: http://images.cnblogs.com/cnblogs_com/sxwgf/201201/201201170833174459.png
[image_image 7]: http://images.cnblogs.com/cnblogs_com/sxwgf/201201/201201170833173064.png
[image 8]: http://images.cnblogs.com/cnblogs_com/sxwgf/201201/201201170833174426.png
[image 9]: http://images.cnblogs.com/cnblogs_com/sxwgf/201201/201201170833176029.png
[image 10]: /images/20220529/4723e20d0efb472098017419328f6318.png
[image 11]: http://images.cnblogs.com/cnblogs_com/sxwgf/201201/201201170833184850.png
[image_image 11]: /images/20220529/21194af57c86464d8651d7cca6ebf1eb.png
[image 12]: http://images.cnblogs.com/cnblogs_com/sxwgf/201201/201201170833188405.png
[image_image 12]: /images/20220529/cf2e0cffd8c841fc9f16f4d7bdccc60f.png
[image 13]: http://images.cnblogs.com/cnblogs_com/sxwgf/201201/20120117083320782.png
[image_image 13]: /images/20220529/b7e57023cb3c436e8158b5558590b29c.png
[image 14]: http://images.cnblogs.com/cnblogs_com/sxwgf/201201/201201170833207161.png
[image_image 14]: /images/20220529/40af5dd64c884572bb4aa26cf557fa30.png
[image 15]: http://images.cnblogs.com/cnblogs_com/sxwgf/201201/20120117083320716.png
[image_image 15]: /images/20220529/9dd123563b544379a29a45be177c7641.png
[image 16]: http://images.cnblogs.com/cnblogs_com/sxwgf/201201/20120117083319815.png
[image_image 16]: /images/20220529/fdbff57ef9b84c7383ef2fa21bb96512.png
[image 17]: http://images.cnblogs.com/cnblogs_com/sxwgf/201201/201201170833198372.png
[image_image 17]: /images/20220529/91311fc87cdc49979f3c30676e92698f.png
[image 18]: http://images.cnblogs.com/cnblogs_com/sxwgf/201201/20120117083323385.png
[image_image 18]: /images/20220529/fd17bea4ff544a1d81dbe68d7bafbf87.png
[image 19]: http://images.cnblogs.com/cnblogs_com/sxwgf/201201/201201170833233799.png
[image_image 19]: /images/20220529/20d9605801884071ae94db4cf83e39b6.png
[image 20]: http://images.cnblogs.com/cnblogs_com/sxwgf/201201/201201170833216538.png
[image_image 20]: /images/20220529/e496e9c8c0d44ed7919ceeecf83e46b8.png
[image 21]: http://images.cnblogs.com/cnblogs_com/sxwgf/201201/201201170833214520.png
[image_image 21]: /images/20220529/b89ea2733bea43599ce7da3ef89b6508.png
[image 22]: http://images.cnblogs.com/cnblogs_com/sxwgf/201201/201201170833227519.png
[image_image 22]: /images/20220529/f24c945d27f34f20b83a1a650430fd1a.png
[image 23]: http://images.cnblogs.com/cnblogs_com/sxwgf/201201/201201170833226024.png
[image_image 23]: /images/20220529/8caca23875dc45c29c1d9611ad68847b.png
[image 24]: http://images.cnblogs.com/cnblogs_com/sxwgf/201201/201201170833242304.png
[image_image 24]: /images/20220529/978caefd3fa04e92947f3f00c8832c98.png
[image 25]: http://images.cnblogs.com/cnblogs_com/sxwgf/201201/201201170833247255.png
[image_image 25]: /images/20220529/db108c8f5f8a48d0b4163f8ea7f93dc0.png