CSS3实现三种切角效果（四边形少一个角）

CSS3可以使用clip-path属性或者伪元素来实现切角效果。以下是实现三种切角效果的示例代码：

1. 切掉一个角：

<div class="cut-corner"></div>

.cut-corner {
  width: 200px;
  height: 100px;
  background-color: #3498db;
  position: relative;
  overflow: hidden;
}
 
.cut-corner::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  border-top: 100px solid #3498db;
  border-right: 200px solid transparent;
}

2. 切掉两个角：

<div class="cut-corners"></div>

.cut-corners {
  width: 200px;
  height: 100px;
  background-color: #3498db;
  position: relative;
  overflow: hidden;
}
 
.cut-corners::before,
.cut-corners::after {
  content: '';
  position: absolute;
  z-index: 10;
}
 
.cut-corners::before {
  top: 0;
  right: 0;
  border-top: 100px solid #3498db;
  border-right: 100px solid transparent;
}
 
.cut-corners::after {
  bottom: 0;
  left: 0;
  border-bottom: 100px solid #3498db;
  border-left: 100px solid transparent;
}

3. 切掉三个角：

<div class="cut-corners-three"></div>

.cut-corners-three {
  width: 200px;
  height: 100px;
  background-color: #3498db;
  position: relative;
  overflow: hidden;
}
 
.cut-corners-three::before,
.cut-corners-three::after {
  content: '';
  position: absolute;
  z-index: 10;
}
 
.cut-corners-three::before {
  top: 0;
  right: 0;
  border-top: 100px solid #3498db;
  border-right: 100px solid transparent;
}
 
.cut-corners-three::after {
  bottom: 0;
  left: 0;
  border-bottom: 100px solid #3498db;
  border-left: 100px solid transparent;
}
 
.cut-corners-three::before,
.cut-corners-three::after {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  top: 50px;
  left: 50px;
  border-top-left-radius: 100px;
}

以上代码实现了三种不同的切角效果，分别是切掉一个角、切掉两个角和切掉三个角。每种效果都可以通过调整border-*属性的大小来改变切角的“角”的大小。