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

The trick is make a square with position:absolute first and then use top and right position negative values(equal to the half of width of the element) to adjust it and then rotate it using transform

Stack Snippet

.container {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 60%;
  height: 30%;
  background: black;
  color: white;
  border-radius: 12px;
  overflow: hidden;
}

.triangle {
  position: absolute;
  top: -25px;
  right: -25px;
  width: 50px;
  height: 50px;
  transform: rotate(45deg);
  background: green;
}

---

Another way to use gradients backgrounds

Stack Snippet

.container {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 60%;
  height: 30%;
  background-image: linear-gradient(45deg, black 92%, green 92%);
  color: white;
  border-radius: 12px;
}