Crop and mask div using CSS without image

Question

I am trying to pin a triangle inside a div .box-inner-2and mask the outside of this view:

but what I get now is this. Could you 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>

Run code

Answer 1

So here is a summary of what I changed in your code:

• Moved the triangle clip-path: polygon(10% 0, 0 20%, 20% 20%)to box-inner-1(adjusted topand leftfor illustration)

• Added insertion clip-pathin box-inner-2and psuedo after element for triangle clip.

See the 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>

Run code