Clipping and Masking a div using CSS without Image - html

Question

I am trying to clip a triangle inside a div .box-inner-2 and mask the outside of that to look like:
but what I am getting now is this. Can you please let me know how to do this?
.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

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>