css 实现三角形,圆形

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>纯css3 实现的标签效果</title>
    <style>
        body{
            font-family: "微软雅黑";
            font-size: 14px;
            padding: 25px;
        }
        /*三角的实现*/
        .sanjiao-box{
            margin-top: 100px;
            overflow: hidden;
        }
        .sanjiao{
            float: left;
            width:0;
            height:0;
            border: 100px solid transparent;
        }
        /*边框*/
        .sanjiao-a{
            border-top-color: #ff0;
            border-right-color: #f0f;
            border-bottom-color: #00f;
            border-left-color: #000;
        }
        /*上三角*/
        .sanjiao-t{
            border-bottom-color: #00f;
        }
        /*右三角*/
        .sanjiao-r{
            border-left-color: #000;
        }
        /*下三角*/
        .sanjiao-b{
            border-top-color: #ff0;
        }
        /*左三角*/
        .sanjiao-l{
            border-right-color: #f0f;
        }
        /*圆圈*/
        .yuan{
            width:0;
            height:0;
            margin-top: 20px;
            border:100px solid #f00;
            border-radius: 50%;
            box-shadow:0 0 0 10px rgba(0,0,0,.5);/*阴影*/
        }
    </style>

</head>
<body>
    <!--css使用边框实现三角-->
    <div>
        <div class="sanjiao sanjiao-a"></div>
        <div class="sanjiao sanjiao-t"></div>
        <div class="sanjiao sanjiao-r"></div>
        <div class="sanjiao sanjiao-b"></div>
        <div class="sanjiao sanjiao-l"></div>
    </div>
    <!--css使用边框实现圆-->
    <div></div>
</body>
</html>

欢迎分享本文,转载请保留出处:前端ABC » css 实现三角形,圆形

赞 (2)
分享到:更多 ()

发表评论 0