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;
}

<div class="container">
  <div class="triangle"></div>
</div>

---

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;
}

<div class="container"></div>

Answer 2

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;
}

<div class="container">
</div>

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

Answer 3

Of course you can also have striped background similar to textbox resizers

.button {
  position: relative;
  width: 150px;
  height: 35px;
  background: black;
  border-radius: 8px;
  overflow: hidden;
}
.blue { background: #09f; }
.red { background: #f00; }
.orange { background: #f90; }
.green { background: #0c0; }

.button:after {
  content: '';
  width: 45px;
  height: 14px;
  background: repeating-linear-gradient(
    0deg,
    rgba(255,255,255,.7),
    rgba(255,255,255,.7) 2px,
    transparent 2px,
    transparent 4px
  );
  border-style: 0px solid;
  right: -15px;
  bottom: -4px;
  position: absolute;
  transform: rotate(-45deg);
}

<div class="button"></div>
<div class="button blue"></div>
<div class="button red"></div>
<div class="button orange"></div>
<div class="button green"></div>

Answer 4

You can use position: absolute on triangle element and set top and right properties to 0.

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

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 30px 30px 0;
  border-color: transparent #608A32 transparent transparent;
  right: 0;
  top: 0;
  position: absolute;
}

<div class="container">
  <div class="triangle"></div>
</div>

You can also just use pseudo-element with absolute position for triangle.

.container {
  position: relative;
  width: 300px;
  height: 70px;
  background: black;
  border-radius: 12px;
  overflow: hidden;
}

.container:after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 30px 30px 0;
  border-color: transparent #608A32 transparent transparent;
  right: 0;
  top: 0;
  position: absolute;
}

<div class="container"></div>

Below is another example with triangles in all corners.

.all_triangles_container {
  position: relative;
  width: 300px;
  height: 70px;
  background: black;
  overflow: hidden;
}

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
}

.triangle_tl {
  border-width: 0 0 30px 30px;
  border-color: transparent transparent transparent green;
  left: 0;
  top: 0;
}

.triangle_tr {
  border-width: 0 30px 30px 0;
  border-color: transparent red transparent transparent;
  right: 0;
  top: 0;
}

.triangle_br {
  border-width: 30px 30px 0 0;
  border-color: transparent yellow transparent transparent;
  right: 0;
  bottom: 0;
}

.triangle_bl {
  border-width: 0 30px 30px 0px;
  border-color: transparent transparent purple transparent;
  left: 0;
  bottom: 0;
}

<div class="all_triangles_container">
  <div class="triangle triangle_tl"></div>
  <div class="triangle triangle_tr"></div>
  <div class="triangle triangle_br"></div>
  <div class="triangle triangle_bl"></div>
</div>