一、利用linear-gradient
.chamfer{
background: #000;
background: linear-gradient(135deg, transparent 15px, #000 0) top left,
linear-gradient(-135deg, transparent 15px, #000 0) top right,
linear-gradient(-45deg, transparent 15px, #000 0) bottom right,
linear-gradient(45deg, transparent 15px, #000 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;}
</style>
<div class="chamfer" ></div>
二：利用clip-path
<style>
.base{width: 300px; height: 300px;}
.chamfer{
background: #009EEB;
clip-path: polygon( 20px 0, calc(100% - 20px) 0, 100% 20px,
100% calc(100% - 20px), calc(100% - 20px) 100%,
20px 100%,
0 calc(100% - 20px),
0 20px);}
</style>
<div class="chamfer"></div>
額外加碼：製作彎曲斜切角
<style>
.chamfer{
background: #e72;
background: radial-gradient(circle at top left, transparent 15px, #e72 0) top left,
radial-gradient(circle at top right, transparent 15px, #e72 0) top right,
radial-gradient(circle at bottom right, transparent 15px,#e72 0) bottom right,
radial-gradient(circle at bottom left, transparent 15px, #e72 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;}
</style>
<div class="chamfer"></div>