1、缺角矩形

使用css3渐变实现缺角矩形，关于linear-gradient属性的介绍请移步至MDN。

☺☺☺html部分☺☺☺

<div class="rectangle_box"><div class="left_top"></div><div class="right_top"></div><div class="right_bottom"></div><div class="left_bottom"></div><div class="quadrangle"></div><div class="two_corners"></div><div class="arc_corners"></div>
</div>

☺☺☺css部分☺☺☺

body {margin: 0;padding: 0;height: 100vh;
}.rectangle_box {height: 100%;display: flex;justify-content: space-evenly;align-items: center;
}.rectangle_box>div {width: 168px;height: 130px;
}/* 左上角 */
.left_top {background: linear-gradient(135deg, transparent 20px, #2baaca 0);
}/* 右上角 */
.right_top {background: linear-gradient(-135deg, transparent 20px, #2baaca 0);
}/* 右下角 */
.right_bottom {background: linear-gradient(-45deg, transparent 20px, #2baaca 0);
}/* 左下角 */
.left_bottom {background: linear-gradient(45deg, transparent 20px, #2baaca 0);
}/* 四个角 */
.quadrangle {background: linear-gradient(135deg, transparent 20px, #2baaca 0) top left,linear-gradient(-135deg, transparent 20px, #2baaca 0) top right,linear-gradient(-45deg, transparent 20px, #2baaca 0) bottom right,linear-gradient(45deg, transparent 20px, #2baaca 0) bottom left;background-size: 50% 50%;background-repeat: no-repeat;
}/* 上两角 */
.two_corners {background: linear-gradient(135deg, transparent 20px, #2baaca 0) top left,linear-gradient(-135deg, transparent 20px, #2baaca 0) top right,linear-gradient(-45deg, transparent 0, #2baaca 0) bottom right,linear-gradient(45deg, transparent 0, #2baaca 0) bottom left;background-size: 50% 50%;background-repeat: no-repeat;
}/* 弧形角 */
.arc_corners {background: radial-gradient(circle at top left, transparent 20px, #2baaca 0) top left,radial-gradient(circle at top right, transparent 20px, #2baaca 0) top right,radial-gradient(circle at bottom right, transparent 20px, #2baaca 0) bottom right,radial-gradient(circle at bottom left, transparent 20px, #2baaca 0) bottom left;background-size: 50% 50%;background-repeat: no-repeat;
}

2、缺角边框

使用两个缺角矩形叠加。

☺☺☺html部分☺☺☺

<div class="border_box"><div></div>
</div>

☺☺☺css部分☺☺☺

body {margin: 0;padding: 0;height: 100vh;display: flex;justify-content: center;align-items: center;
}.border_box {width: 360px;height: 130px;padding: 4px;background: linear-gradient(135deg, transparent 20px, #2baaca 0);
}.border_box>div {width: 100%;height: 100%;background: linear-gradient(135deg, transparent 19px, #ffffff 0);
}

3、折角矩形

在缺角矩形的基础上多了一个折角。

☺☺☺html部分☺☺☺

<div class="angled_box"><div class="angled_45"></div><div class="angled_35"></div>
</div>

☺☺☺css部分☺☺☺

body {margin: 0;padding: 0;
}.angled_box {height: 100vh;display: flex;justify-content: space-evenly;align-items: center;
}.angled_box>div {width: 168px;height: 130px;
}/* 45度折角 */
.angled_45 {background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, 0.4) 0) no-repeat 100% 0 / 1.4rem 1.4rem,linear-gradient(-135deg, transparent 1rem, #2baaca 0);
}/* 35度折角 */
.angled_35 {background: linear-gradient(-150deg, transparent 1rem, #2baaca 0);border-radius: .3em;position: relative;
}.angled_35::before {content: '';position: absolute;right: 0;top: -0.85rem;width: 1.15em;height: 2em;background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0.4)) 100% 0 no-repeat;transform: rotate(-30deg);/* 让三角形的右下角成为旋转的中心 */transform-origin: bottom right;box-shadow: -.2em .2em .3em -.1em rgba(0, 0, 0, .15);/* 左下角继承border-radius */border-bottom-left-radius: inherit;
}

4、clip-path属性

clip-path可以创建一个只显示元素部分区域的剪切区域。区域内的部分显示，区域外的隐藏。

☺☺☺html部分☺☺☺

<div class="clip_path_box"><div class="path_1"></div><div class="path_2"></div>
</div>

☺☺☺css部分☺☺☺

body {margin: 0;padding: 0;
}.clip_path_box {height: 100vh;display: flex;justify-content: space-evenly;align-items: center;
}.clip_path_box>div {width: 186px;height: 130px;
}.path_1 {background-image: url('../image/13_1101.jpg');background-size: 100% 100%;background-repeat: no-repeat;clip-path: polygon(15px 0, calc(100% - 15px) 0,100% 15px, 100% calc(100% - 15px),calc(100% - 15px) 100%, 15px 100%,0 calc(100% - 15px), 0 15px);
}.path_2 {width: 120px;height: 80px;background: #2baaca;/*clip-path: inset(25% 0 25% 0 round 0 25% 0 25%);*/clip-path: inset(0 round 0 25%);/* 可以简写 *//* inset(<top> <right> <bottom> <left> round <top-radius> <right-radius> <bottom-radius> <left-radius>) *//* inset使用四个值（对应“上 右 下 左”的顺序）来设置圆角半径。 */
}