CODEWITHSUNDEEP
htmlcss
Jonas0000
Jonas0000

Reputation: 1113

Draw triangle in corner of div

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:

img 

.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!!

Upvotes: 22

Views: 34704

Answers (5)

Temani Afif
Temani Afif

Reputation: 272723

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

Upvotes: 27

Crafty Cat
Crafty Cat

Reputation: 105

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.

Upvotes: 0

vol7ron
vol7ron

Reputation: 42099

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>

Upvotes: 0

Nenad Vracar
Nenad Vracar

Reputation: 122027

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>

Upvotes: 40

Bhuwan
Bhuwan

Reputation: 16855

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>

Upvotes: 4

Related Questions