html - 使用没有图像的 CSS 裁剪和屏蔽 div

Question

我正在尝试在 div .box-inner-2 中剪裁一个三 Angular 形并遮盖其外部，使其看起来像:

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

  .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%);
  }

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

Answer 1

下面简要介绍一下我在您的代码中所做的更改:

1. 将 三 Angular 形 clip-path: polygon(10% 0, 0 20%, 20% 20%) 移动到 box-inner -1(调整top和left用于说明)

2. 向 box-inner-2 添加了一个inset clip-path 和一个psuedo在元素之后剪辑三 Angular 形。

请看下面的演示:

.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>