custom CSS corner with lining

Question

I know that it is possible to make a corner like this:

.left-corner {
  width: 0;
  height: 0;
  border-top: 100px solid powderblue;
  border-left: 100px solid transparent;
}

<div class="left-corner"></div>

Is it possible to make a corner with CSS with multiple colors out of an element. Like this?

Answer 1

Well you could use a peusdo element and put it above your original Element, if you want it to exactly look like the image you've posted.

See Code Snippet below.

.left-corner{
  width: 0;
  height: 0;
  border-top: 120px solid red;
  border-left: 120px solid transparent;
  
  position:relative;
}

.left-corner:before {
  content: "";
  
  position:absolute;
  top:-120px;
  left:-100px;
  
  border-top: 100px solid powderblue;
  border-left: 100px solid transparent;
}

<div class="left-corner"></div>