Draw triangle in corner of div

Question

I\'d like to draw some kind of triangle in the corner of a div. Because I don\'t want to use "px" I\'d like to achieve the same result also with percentage values.

Answer 1

You can simply rely on background and create the triangle with a linear-gradient above the background-color without extra markup and pseudo-element:

.container { 
  width: 400px; 
  height: 100px; 
  background: 
   linear-gradient(to top right,transparent 50%,#608A32 0) top right/40px 40px no-repeat,
   black; 
  color: white;
  border-radius: 12px;
  overflow: hidden;
}

Related: https://stackoverflow.com/a/49696143/8620333