Draw triangle in corner of div

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>

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>

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

.container { 
  width: 400px; 
  height: 100px; 
  background: linear-gradient(-135deg,#608A32 35px,#000 0); 
  color: white;
  border-radius: 12px;
  overflow: hidden;
}
<div class="container"></div>

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

Tags:

Html

Css

Recent Posts