控制台登录Javascript Office Addin(Console log in Javascript Office Addin)

 以下是我在代码中更改内容的简要说明： 
 
 
 
 将三角形 clip-path: polygon(10% 0, 0 20%, 20% 20%)到box-inner-1 （ top和left调整为插图） 
 
 
 添加了box-inner-2的插入 clip-path和剪切三角形的psuedo after元素。 
 
 
 见下面的演示： 
 
 
 
 
 
  
.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>
 
 
 
 

So here is a brief of what I changed in your code:
 
 
 
Moved the triangle clip-path: polygon(10% 0, 0 20%, 20% 20%) to the box-inner-1 (adjusted top and left for illustration)
 
 
Added an inset clip-path to the box-inner-2 and a psuedo after element to clip the triangle.
 
 
See demo below:
 
 
 
 
 
  
.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>