css绘制内扣圆角

纯静态的一种效果绘制，避免使用图标浪费内存。效果如下

废话不多说，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>circle</title>
    <style type="text/css">
        #app{
            width:300px;height:200px;position: relative;box-sizing: border-box;padding:10px;
        }
        .box{
            width:100%;height:100%;border:2px solid #f00;
        }
        .circle{
            display: block;width:20px;height:20px;border:2px solid transparent;position: absolute;z-index: 1;background:#fff;
        }
        .top-left{
            left:10px;top: 10px;border-right-color: #f00;border-bottom-color: #f00;border-radius:0 0 20px 0;
        }
        .top-right{
            right: 5px;top: 10px;border-left-color: #f00;border-bottom-color: #f00;border-radius:0 0 0 20px;
        }
        .btm-left{
            left: 10px;bottom:6px;border-right-color: #f00;border-top-color: #f00;border-radius:0 20px 0 0;
        }
        .btm-right{
            right: 6px;bottom: 6px;border-left-color: #f00;border-top-color: #f00;border-radius:20px 0 0 0;
        }        
    </style>
</head>
<body>
    <div id="app">
        <div class="box"></div>
        <i class="circle top-left"></i>
        <i class="circle top-right"></i>
        <i class="circle btm-left"></i>
        <i class="circle btm-right"></i>
    </div>
</body>
</html>

效果二：

相比第一种效果，增加了四角的曲别针效果，完整代码为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>circle</title>
    <style type="text/css">
        .cont{
            height:300px;
            box-sizing: border-box;padding:10px;
            position: relative;
        }

        .icon-box{
            width:60px;height:60px;border:2px solid #f00;position: absolute;overflow: hidden;
        }
        .icon-top-left{
            left: 0;top: 0;border-right-color: transparent;border-bottom-color: transparent;border-radius:10px 0 0 0;
        }
        .icon-top-right{
            right: 0;top: 0;border-left-color: transparent;border-bottom-color: transparent;border-radius:0 10px 0 0;
        }
        .icon-btm-left{
            left: 0;bottom: 0;border-right-color: transparent;border-top-color: transparent;border-radius:0 0 0 10px;
        }
        .icon-btm-right{
            right: 0;bottom: 0;border-left-color: transparent;border-top-color: transparent;border-radius:0 0 10px 0;
        }

        .icon-box i{
            display: block;width:18px;height:18px;border-radius:50%;border:2px solid #f00;position: absolute;z-index: 2;
        }
        .icon-top-left i{
            left: -2px;top: -2px;
        }
        .icon-top-right i{
            right: -2px;top: -2px;
        }
        .icon-btm-left i{
            left: -2px;bottom: -2px;
        }
        .icon-btm-right i{
            right: -2px;bottom: -2px;
        }

        .app{
            width:100%;height:100%;
            position: relative;box-sizing: border-box;padding:5px 7px 7px 6px;
        }
        .box{
            width:100%;height:100%;border:2px solid #f00;
        }
        .circle{
            display: block;width:20px;height:20px;border:2px solid transparent;position: absolute;z-index: 1;background:#fff;
        }
        .top-left{
            left:6px;top: 5px;border-right-color: #f00;border-bottom-color: #f00;border-radius:0 0 20px 0;
        }
        .top-right{
            right: 3px;top:5px;border-left-color: #f00;border-bottom-color: #f00;border-radius:0 0 0 20px;
        }
        .btm-left{
            left: 6px;bottom:3px;border-right-color: #f00;border-top-color: #f00;border-radius:0 20px 0 0;
        }
        .btm-right{
            right: 3px;bottom: 3px;border-left-color: #f00;border-top-color: #f00;border-radius:20px 0 0 0;
        }    
        .box img{
            display: block;width:100%;height:100%;
        }    
    </style>
</head>
<body>
    <div class="cont">
        <div class="icon-box icon-top-left"><i></i></div>
        <div class="icon-box icon-top-right"><i></i></div>
        <div class="icon-box icon-btm-left"><i></i></div>
        <div class="icon-box icon-btm-right"><i></i></div>
        <div class="app">
            <div class="box"><img src="img_src" alt=""></div>
            <i class="circle top-left"></i>
            <i class="circle top-right"></i>
            <i class="circle btm-left"></i>
            <i class="circle btm-right"></i>
        </div>
    </div>
</body>
</html>

posted @ 2018-10-22 15:41 努力努力要努力阅读(381) 评论(0) 编辑收藏举报

css绘制内扣圆角

公告