liang14658fox

Appearance

方法1 ​

大概实现思路如下：

一个外层div，设置宽高，设置相对定位。

4个小的div，在外层div里面，通过border-radius进行不同方法的圆角设置

为这些小块加上不同方位的边框，通过对象定位，分别定位到外层div的

html
<div class="wrap">
    <div class="wrap_left_top"></div>
    <div class="wrap_right_top"></div>
    <div class="wrap_left_bottom"></div>
    <div class="wrap_right_bottom"></div>
</div>

<div class="wrap">
    <div class="wrap_left_top"></div>
    <div class="wrap_right_top"></div>
</div>
<div class="wrap">
    <div class="wrap_left_top"></div>
    <div class="wrap_right_top"></div>
    <div class="wrap_left_bottom"></div>
    <div class="wrap_right_bottom"></div>
</div>

<div class="wrap">
    <div class="wrap_left_top"></div>
    <div class="wrap_right_top"></div>
</div>
css
.wrap {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    position: relative;
    margin-top: 100px;
    margin-left: 100px;
    background-color: #cccccc;
}
.wrap_left_top,
.wrap_right_top,
.wrap_left_bottom,
.wrap_right_bottom {
    position: absolute;
    width: 40px;
    height: 40px;
    border: 1px solid #fff;
    z-index: 1;
    background: pink;
}
.wrap_left_top {
    top: -1px;
    left: -1px;
    border-radius: 0 0 40px 0;
    border-bottom: 1px solid red;
    border-right: 1px solid red;
}
.wrap_right_top {
    top: -1px;
    right: -1px;
    border-radius: 0 0 0 40px;
    border-bottom: 1px solid red;
    border-left: 1px solid red;
}
.wrap_left_bottom {
    left: -1px;
    bottom: -1px;
    border-radius: 0 40px 0 0;
    border-top: 1px solid red;
    border-right: 1px solid red;
}
.wrap_right_bottom {
    right: -1px;
    bottom: -1px;
    border-radius: 40px 0 0 0;
    border-top: 1px solid red;
    border-left: 1px solid red;
}
.wrap {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    position: relative;
    margin-top: 100px;
    margin-left: 100px;
    background-color: #cccccc;
}
.wrap_left_top,
.wrap_right_top,
.wrap_left_bottom,
.wrap_right_bottom {
    position: absolute;
    width: 40px;
    height: 40px;
    border: 1px solid #fff;
    z-index: 1;
    background: pink;
}
.wrap_left_top {
    top: -1px;
    left: -1px;
    border-radius: 0 0 40px 0;
    border-bottom: 1px solid red;
    border-right: 1px solid red;
}
.wrap_right_top {
    top: -1px;
    right: -1px;
    border-radius: 0 0 0 40px;
    border-bottom: 1px solid red;
    border-left: 1px solid red;
}
.wrap_left_bottom {
    left: -1px;
    bottom: -1px;
    border-radius: 0 40px 0 0;
    border-top: 1px solid red;
    border-right: 1px solid red;
}
.wrap_right_bottom {
    right: -1px;
    bottom: -1px;
    border-radius: 40px 0 0 0;
    border-top: 1px solid red;
    border-left: 1px solid red;
}

方法2 使用background-image实现 ​

WARNING

该方法无法实现在一个div上存在2、3个内凹圆角的样式

css
.inset-circle {
    background-size: 70% 70%;
    background-image: radial-gradient(circle at 100% 100%,
            transparent 0,
            transparent 12px,
            #EEEAE2 13px),
        radial-gradient(circle at 0 0,4
            transparent 0,
            transparent 12px,
            #EEEAE2 13px),
        radial-gradient(circle at 100% 0,
            transparent 0,
            transparent 12px,
            #EEEAE2 13px),
        radial-gradient(circle at 0 100%,
            transparent 0,
            transparent 12px,
            #EEEAE2 13px);
    background-repeat: no-repeat;
    background-position: right bottom, left top, right top, left bottom;
}

.border-left-bottom {
    background-image: radial-gradient(circle at 0 0, transparent 0, transparent 12px, #EEEAE2 12px);
}

.border-left-top {
    background-image: radial-gradient(circle at 100% 0, transparent 0, transparent 12px, #EEEAE2 12px);
}

.border-right-bottom {
    background-image: radial-gradient(circle at 0 100%, transparent 0, transparent 12px, #EEEAE2 12px);
}

.border-right-top {
    background-image: radial-gradient(circle at 100% 100%, transparent 0, transparent 12px, #EEEAE2 12px);
}
.inset-circle {
    background-size: 70% 70%;
    background-image: radial-gradient(circle at 100% 100%,
            transparent 0,
            transparent 12px,
            #EEEAE2 13px),
        radial-gradient(circle at 0 0,4
            transparent 0,
            transparent 12px,
            #EEEAE2 13px),
        radial-gradient(circle at 100% 0,
            transparent 0,
            transparent 12px,
            #EEEAE2 13px),
        radial-gradient(circle at 0 100%,
            transparent 0,
            transparent 12px,
            #EEEAE2 13px);
    background-repeat: no-repeat;
    background-position: right bottom, left top, right top, left bottom;
}

.border-left-bottom {
    background-image: radial-gradient(circle at 0 0, transparent 0, transparent 12px, #EEEAE2 12px);
}

.border-left-top {
    background-image: radial-gradient(circle at 100% 0, transparent 0, transparent 12px, #EEEAE2 12px);
}

.border-right-bottom {
    background-image: radial-gradient(circle at 0 100%, transparent 0, transparent 12px, #EEEAE2 12px);
}

.border-right-top {
    background-image: radial-gradient(circle at 100% 100%, transparent 0, transparent 12px, #EEEAE2 12px);
}