使用没有Image的CSS剪切和屏蔽div

Question

我正在尝试在div .box-inner-2中剪切一个三角形，并将其外部掩盖为：

但我现在得到的是这个。你能告诉我怎么做吗？

＆＃13;

＆＃13;

  .wrapper{
    position: relative;
    height: 250px;
    width: 250px;
  }
  .box-inner-1{
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: red;
  }
  .box-inner-2{
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    clip-path: polygon(10% 0, 0 20%, 20% 20%);
  }

＆＃13;

<div class="wrapper">
 <div class="box-inner-1"></div>
 <div class="box-inner-2"></div> 
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

以下是我在代码中更改内容的简要说明：

1. 将三角形 clip-path: polygon(10% 0, 0 20%, 20% 20%)移至box-inner-1（已调整top和left以进行说明）

2. 在clip-path添加插入 box-inner-2，在剪辑元素后添加 psuedo 三角形。

见下面的演示：

.wrapper {
  position: relative;
  height: 250px;
  width: 250px;
  border: 2px solid;
}

.wrapper:after {
  content: '';
  clip-path: inset(0% 94% 0% 0%);
  background: #fff;
  display: block;
  height: 100%;
}

.box-inner-1 {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 0;
  bottom: 0;
  background-color: red;
  clip-path: polygon(10% 0, 0 20%, 20% 20%);
}

.box-inner-2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  clip-path: inset(0% 0% 93% 0%);
}

<div class="wrapper">
  <div class="box-inner-1"></div>
  <div class="box-inner-2"></div>
</div>