原来css的border还可以这样玩

认真你就输了丶
认真你就输了丶 发布于 2016-11-28 20:54:39 浏览:2748 类型:原创 - 随笔 分类:HTML/CSS - css 二维码: 作者原创 版权保护
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>五角星</title>
        <style type="text/css">
            #star{
                width: 0px;
                height: 0px;
                margin: 100px auto;
                color: red;
                position: relative;
                display: block;
                border-bottom: 70px solid red;
                border-left: 100px solid transparent;
                border-right: 100px solid transparent;
                -webkit-transform: rotate(35deg);
                   -moz-transform: rotate(35deg);
                    -ms-transform: rotate(35deg);
                     -o-transform: rotate(35deg);
                        transform: rotate(35deg);
            }
            #star:before{
                content: '';
                width: 0px;
                height: 0px;
                margin: 50px 0;
                color: yellow;
                position: relative;
                display: block;
                border-bottom: 80px solid yellow;
                border-left: 30px solid transparent;
                border-right: 30px solid transparent;
                -webkit-transform: rotate(-35deg);
                   -moz-transform: rotate(-35deg);
                    -ms-transform: rotate(-35deg);
                     -o-transform: rotate(-35deg);
                        transform: rotate(-35deg);
                top: -45px;
                left: -65px;
            }
            #star:after{
                content: '';
                width: 0;
                height: 0;
                position: absolute;
                display: block;
                top: 3px;
                left: -105px;
                color: #fc2e5a;
                border-right: 100px solid transparent;
                border-bottom: 70px solid #fc2e5a;
                border-left: 100px solid transparent;
                -webkit-transform: rotate(-70deg);
                -moz-transform: rotate(-70deg);
                -ms-transform: rotate(-70deg);
                -o-transform: rotate(-70deg);

            }
        </style>
    </head>
    <body>
        <div id="star"></div>
    </body>
</html>
标签:
z
给个赞 19 人点赞
收藏 7 人收藏
评论 已有 3 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
鲁班code
鲁班code2016-11-30 16:19:143F
展开代码
alert("0.0 buyaodian");
window.close();
//@认真你就输了丶展开代码
console.log("[emot=qq]4[/emot]")
//@鲁班code展开代码
alert(“[emot=qq]27[/emot]”)
举报 支持 (0) 回复 (0)
认真你就输了丶
认真你就输了丶2016-11-30 16:16:502F
展开代码
console.log("[emot=qq]4[/emot]")
//@鲁班code展开代码
alert(“[emot=qq]27[/emot]”)
举报 支持 (0) 回复 (1)
鲁班code
鲁班code2016-11-30 16:08:491F
展开代码
alert(“[emot=qq]27[/emot]”)
举报 支持 (0) 回复 (1)
认真你就输了丶 认真你就输了丶 作者

涸辙遗鲋,旦暮成枯;人而无志,与彼何殊.

作者最新