We often implement rounded buttons, pictures, etc., but it is still more complicated to achieve this concave rounded block shape. Let me first talk about the idea:
第一，需要一个大块进行包裹，需要设置宽度和高度等；
第二，需要四个小块，来使用圆角的属性border-radius，进行不同方向的圆角设置；
第三，为这些块加上border属性。
代码如下：
<html>
<head>
<meta charset="utf-8"/>
<title>内凹圆角</title>
<style type="text/css">
.cro {
width: 100px;
height: 100px;
border: 1px solid #58C4E6;
position: relative;
}
.cro_left_top, .cro_right_top, .cro_left_bottom, .cro_right_bottom {
position: absolute;
width: 20px;
height: 20px;
border: 1px solid #fff;
z-index: 1;
background: #fff;
}
.cro_left_top {
top: -1px;
left: -1px;
border-radius: 0 0 20px 0;
border-bottom: 1px solid #58C4E6;
border-right: 1px solid #58C4E6;
}
.cro_right_top {
top: -1px;
right: -1px;
border-radius: 0 0 0 20px;
border-bottom: 1px solid #58C4E6;
border-left: 1px solid #58C4E6;
}
.cro_left_bottom {
left: -1px;
bottom: -1px;
border-radius: 0 20px 0 0;
border-top: 1px solid #58C4E6;
border-right: 1px solid #58C4E6;
}
.cro_right_bottom {
right: -1px;
bottom: -1px;
border-radius: 20px 0 0 0;
border-top: 1px solid #58C4E6;
border-left: 1px solid #58C4E6;
}
</style>
</head>
<body>
<div class="cro">
<div class="cro_left_top"></div>
<div class="cro_right_top"></div>
<div class="cro_left_bottom"></div>
<div class="cro_right_bottom"></div>
</div>
</body>
</html>