CSS 神奇的border（二）

最新推荐文章于 2023-03-16 17:48:49 发布
alisure
最新推荐文章于 2023-03-16 17:48:49 发布
阅读量473
点赞数
分类专栏： CSS 文章标签： CSS border
本文链接：https://blog.csdn.net/ALISURE/article/details/48588405
版权
CSS 专栏收录该内容
8 篇文章 0 订阅
订阅专栏
效果图
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            float: left;
            margin: 0px 10px;
            border: 25px solid #67679a;
        }
        .style-1{
            width: 100px;
            height: 50px;
            border: none;
            background-color: #67679a;
            border-radius: 100px / 50px;
        }
        .style-2{
            width: 100px;
            height: 50px;
            border: none;
            background-color: #67679a;
        }
        .style-3{
            height: 0px;
            border-top: 0px;
            width: 50px;
            background-color: transparent;
            border-bottom-width: 70px;
            border-left-color: transparent;
            border-right-color: transparent;
        }
        .style-4{
            width: 0px;
            height: 0px;
            background-color: transparent;
            border-top-color: transparent;
            border-left-color: transparent;
            border-right-color: transparent;
            border-width:0px 50px 76px 50px;
            position: relative;
        }
        .style-4:after{
            position: absolute;
            content: "";
            border-width:76px 50px 0px 50px;
            border-style: solid;
            border-top-color: #67679a;
            border-bottom-color: transparent;
            border-left-color: transparent;
            border-right-color: transparent;
            left: -50px;
            top: 25px;
        }
        .style-5{
            position: relative;
            height: 0px;
            border-top: 0px;
            width: 40px;
            background-color: transparent;
            border-bottom-width: 40px;
            border-left-color: transparent;
            border-right-color: transparent;
        }
        .style-5:after{
            position: absolute;
            content: "";
            border-width:60px 45px 0px 45px;
            border-style: solid;
            border-color: #67679a transparent transparent transparent;
            left: -25px;
            top: 40px;
        }
        .style-6{
            position: relative;
            height: 0px;
            border-top: 0px;
            width: 40px;
            background-color: transparent;
            border-bottom-width: 40px;
            border-left-color: transparent;
            border-right-color: transparent;
        }
        .style-6:after{
            position: absolute;
            content: "";
            width: 40px;
            border-width:40px 25px 0px 25px;
            border-style: solid;
            border-color: #67679a transparent transparent transparent;
            left: -25px;
            top: 40px;
        }
        .style-7{
            position: relative;
            width: 90px;
            height: 40px;
            border: none;
            top: 30px;
            background-color: #67679a;
        }
        .style-7:before{
            position: absolute;
            content: "";
            width: 40px;
            border-width:0px 25px 30px 25px;
            border-style: solid;
            border-color: transparent transparent #67679a transparent;
            top: -30px;
        }
        .style-7:after{
            position: absolute;
            content: "";
            width: 40px;
            border-width: 30px 25px 0px 25px;
            border-style: solid;
            border-color: #67679a transparent transparent transparent;
            top: 40px;
        }
        .style-8{
            position: relative;
            width: 50px;
            height: 50px;
            top: 20px;
            left: 10px;
            border: none;
            margin: 0px 27px 0px 10px;
            -webkit-transform:rotate(45deg) ;
            background-color: #67679a;
        }
        .style-8:before{
            position: absolute;
            content: "";
            border-radius: 100%;
            border-width:25px;
            border-style: solid;
            border-color: transparent transparent #67679a #67679a;
            left: -24px;
            -webkit-transform:rotate(45deg) ;
        }
        .style-8:after{
            position: absolute;
            content: "";
            border-radius: 100%;
            border-width: 25px;
            border-style: solid;
            border-color: #67679a #67679a transparent transparent;
            top: -24px;
            -webkit-transform:rotate(-45deg) ;
        }
        .style-9{
            height: 60px;
            width: 100px;
            border: none;
            border-radius: 5px;
            background-color: #67679a;
            position: relative;
            left: 10px;
        }
        .style-9:before{
            position: absolute;
            content: "";
            height: 0px;
            width: 0px;
            border-width: 10px 15px 10px 0px;
            border-style: solid;
            border-color: transparent #67679a transparent transparent;
            left: -10px;
            top: 8px;
        }
        .style-10{
            height: 80px;
            width: 80px;
            border: none;
            background-color: #67679a;
            position: relative;
            top: 14px;
            left: 20px;
            -webkit-transform: rotate(22.5deg);
        }
        .style-10:before{
            position: absolute;
            content: "";
            height: 80px;
            width: 80px;
            background-color: #67679a;
            -webkit-transform: rotate(45deg);
        }
        .style-11{
            border: 0 solid transparent;
            border-left:50px solid #669;
            border-right:50px solid #669;
            border-radius: 0 100px 0 100px;
            width:42px;
            height:100px;
            position: relative;
            left: 20px;
            background-color: transparent;
        }
        .style-12{
            width: 100px;
            height: 50px;
            border: none;
            border-radius: 10px;
            background-color: #67679a;
            position: relative;
        }
        .style-12:before{
            border: 0 solid transparent;
            border-top:15px solid #669;
            border-radius: 0px 30px 0px 0px;
            width:30px;
            height:10px;
            position: absolute;
            content: "";
            left: 0px;
            top: 40px;
            background-color: transparent;
            -webkit-transform: rotate(90deg);
        }
        .style-12:after{
            border: 0 solid transparent;
            border-left:15px solid #669;
            border-radius: 0px 0px 0px 30px;
            width:10px;
            height:30px;
            position: absolute;
            content: "";
            left: 72px;
            top: 38px;
            background-color: transparent;
        }
        .style-13{
            width: 100px;
            height: 50px;
            border: none;
            border-radius: 100%;
            background-color: #67679a;
            position: relative;
        }
        .style-13:before{
            border: 0 solid transparent;
            border-top:15px solid #669;
            border-radius: 0px 30px 0px 0px;
            width:30px;
            height:10px;
            position: absolute;
            content: "";
            left: 10px;
            top: 40px;
            background-color: transparent;
            -webkit-transform: rotate(90deg);
        }
    </style>
</head>
<body>
    <div class="style-1"></div>
    <div class="style-2"></div>
    <div class="style-3"></div>
    <div class="style-4"></div>
    <div class="style-5"></div>
    <div class="style-6"></div>
    <div class="style-7"></div>
    <div class="style-8"></div>
    <div class="style-9"></div>
    <div class="style-10"></div>
    <div class="style-11"></div>
    <div class="style-12"></div>
    <div class="style-13"></div>
</body>
</html>