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

css实现五角星

时间:2018-11-17 21:28:52      阅读:1837      评论:0      收藏:0      [点我收藏+]

标签:blog   child   cap   class   red   container   text   log   tps   

1、创建一个div,设置样式如下

div{

            width: 50px;

            height: 50px;

            border-top: 50px solid red;

            border-bottom: 50px solid yellow;

            border-left: 50px solid green;

            border-right: 50px solid blue;

        }

浏览器运行结果如下:     边框之间的相接处的线都是斜的,

技术分享图片技术分享图片?                      技术分享图片技术分享图片?

当元素的框和高都设置为0时,即

div{

            width: 0;

            height: 0;

            border-top: 50px solid red;

            border-bottom: 50px solid yellow;

            border-left: 50px solid green;

            border-right: 50px solid blue;

 }

运行结果如下:

技术分享图片技术分享图片?                                   

 

2、css3形成三角形

可以给div设置如下样式:

div{

            width: 0;

            height: 0;

            border-top: 50px solid transparent;

            border-bottom: 50px solid yellow;

            border-left: 50px solid transparent;

            border-right: 50px solid transparent;

    }

浏览器运行结果如下:

技术分享图片技术分享图片?

3、通过transform: rotate()成五角星

创建三个div,设置样式如下:

div{

            position: absolute;

            top: 50px;

            left: 50px;

 }

        div:nth-child(1){

            width: 0;

            height: 0;

            border-top: 50px solid yellow;

            border-left: 86.6px solid transparent;   // 86.6=50*(根号3),使得写出来的三角形顶角为120deg

            border-right: 86.6px solid transparent;

        }

        div:nth-child(2){

            width: 0;

            height: 0;

            border-top: 50px solid red;

            border-left: 86.6px solid transparent;

            border-right: 86.6px solid transparent;

            transform: rotate(73deg);       //通过调整旋转的角度,形成五角星

        }

        div:nth-child(3){

            width: 0;

            height: 0;

            border-top: 50px solid green;

            border-left: 86.6px solid transparent;

            border-right: 86.6px solid transparent;

            transform: rotate(148deg);

        }

或者创建一个div使用两个伪类的方式来实现,样式设置如下:

div{

            width: 0;

            height: 0;

            border-top: 50px solid yellow;

            border-left: 86.6px solid transparent;

            border-right: 86.6px solid transparent;

            margin-top: 100px;

            position: relative;

        }

        div::before{

            content: "";

            display: block;

            width: 0;

            height: 0;

            border-top: 50px solid red;

            border-left: 86.6px solid transparent;

            border-right: 86.6px solid transparent;

            transform: rotate(75deg);

            position: absolute;

            top: -50px;

            left: -86.6px;

        }

        div::after{

            content: "";

            display: block;

            width: 0;

            height: 0;

            border-top: 50px solid green;

            border-left: 86.6px solid transparent;

            border-right: 86.6px solid transparent;

            transform: rotate(149deg);

            position: absolute;

            top: -50px;

            left: -86.6px;

        }

浏览器运行结果: 

技术分享图片技术分享图片?                    改变边框颜色都为黄色        技术分享图片技术分享图片?

css实现五角星

标签:blog   child   cap   class   red   container   text   log   tps   

原文地址:https://www.cnblogs.com/annbest/p/9975616.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!