Draw triangle in corner of div - html

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.
This is what it should looks like:
.container {
position: absolute;
top: 5%;
left: 5%;
width: 60%;
height: 30%;
background: black;
color: white;
border-radius: 12px;
overflow: hidden;
}
.triangle {
position: relative;
top: 10%;
left: 90%;
width: 10%;
height: 10%;
-webkit-transform: rotate(45deg);
background: green;
}
<div class="container">
<div class="triangle"></div>
</div>
Any help would be very appreciated. Thanks in advance!!

Answer 1

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>

Answer 2

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

Answer 3

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 4

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 5

If overflow: hidden on the container is not an option you can use the pseudo element's bottom border:
.container:after {
content: '';
position: absolute;
width: 0;
height: 0;
margin: -16px;
border: 10px solid transparent;
border-bottom-color: red;
transform: rotate(-45deg);
}
Adjust margin and border values for your case.