这种缺角的矩形怎么用css实现啊，中间是透明的？

Question

Answer 1

来，我来教你一招：

https://codepen.io/pantao/pen...

<div class="body">
  <div class="tripple-corners-rectangle">我是一个缺角的矩形</div>
  <div class="background-tripple-corners-rectange">我是一个缺角的矩形</div>
</div>

.body {
  background-color: #f0f0f0;
  padding: 20px;
}
.tripple-corners-rectangle {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 15px 100%, 0% calc(100% - 15px), 0% 0%);
  padding: 15px;
  background-color: #aca;
  position: relative;
  display: inline-block;
}

.tripple-corners-rectangle:before {
  content: '';
  display: block;
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  left: 1px;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 15px 100%, 0% calc(100% - 15px), 0% 0%);
  padding: 15px;
  background-color: #fff;
  z-index: -2;
}

.tripple-corners-rectangle:after {
  content: '';
  display: block;
  position: absolute;
  right: 3px;
  top: 3px;
  width: 15px;
  height: 15px;
  background-color: #aca;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
}

.background-tripple-corners-rectange {
  padding: 15px;
  position: relative;
  display: inline-block;
  border: 1px solid #aca;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 15px 100%, 0% calc(100% - 15px), 0% 0%);
}
.background-tripple-corners-rectange:before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 15px;
  height: 15px;
  background-color: #aca;
  clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
}

.background-tripple-corners-rectange:after {
  content: '';
  display: block;
  position: absolute;
  right: 3px;
  top: 3px;
  width: 15px;
  height: 15px;
  background-color: #aca;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
}

Answer 2

写了一个不太实用的方案。。
https://stackblitz.com/edit/j...