纯CSS+HTML制作三角形和圆|实心+空心

我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来。

本文是流行的三角形和圆的绘制方法。

<style type="text/css">
    .clearfix{zoom:1;} /* clearfix for IE */
    .clearfix:after{content:"";display:block;clear:both;visibility:hidden;}
    .triangle-solid>div,.triangle-hollow>div{float: left;margin-right: 50px;}
    .top{
        position: relative;
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 50px solid #000;
    }
    .bottom{
        position: relative;
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 50px solid #000;
    }
    .left{
        position: relative;
        width: 0;
        height: 0;
        border-top: 25px solid transparent;
        border-right: 25px solid #000;
        border-bottom: 25px solid transparent;
    }
    .right{
        position: relative;
        width: 0;
        height: 0;
        border-top: 25px solid transparent;
        border-bottom: 25px solid transparent;
        border-left: 25px solid #000;
    }
    .triangle-hollow>.top:after{
        content: '';
        position: absolute;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 50px solid #fff;
        left: -50px;
        top: 5px;
    }
    .triangle-hollow>.bottom:after{
        content: '';
        position: absolute;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 50px solid #fff;
        left: -50px;
        top: -55px;
    }
    .triangle-hollow>.left:after{
        content: '';
        position: absolute;
        border-top: 25px solid transparent;
        border-right: 25px solid #fff;
        border-bottom: 25px solid transparent;
        left: 5px;
        top: -25px;
    }
    .triangle-hollow>.right:after{
        content: '';
        position: absolute;
        border-top: 25px solid transparent;
        border-bottom: 25px solid transparent;
        border-left: 25px solid #fff;
        left: -30px;
        top: -25px;
    }
    .round{
        width: 50px;
        height: 50px;
        background: #000;
        border-radius: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
    }
    .round-hollow{
        position: relative;
    }
    .round-hollow:after{
        position: absolute;
        content: '';
        width: 46px;
        height: 46px;
        background: #fff;
        border-radius: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        top:2px;
        left:2px;
    }
</style>
<body>
    <h2>实心三角</h2>
    <div class="triangle-solid clearfix">
        <div class="top"></div>
        <div class="bottom"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <h2>空心三角</h2>
    <div class="triangle-hollow clearfix">
        <div class="top"></div>
        <div class="bottom"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <h2>实心圆</h2>
    <div class="round"></div>
    <h2>空心圆</h2>
    <div class="round round-hollow"></div>
</body>

纯CSS+HTML制作三角形和圆|实心+空心

文章链接:http://www.xszzz.com/2019/05/1451.html  本站文章除注明外皆为原创,若侵犯您权益请留言告知,我们会及时处理。

关于本站站长:洃少

醉风云博主,爱好建站和视觉设计。曾从事物资管理、产品运营,现为Web全栈工程师。