How do you create a div with a triangle shape using css only?

Question

I want a div that has an "angle like shape on the left". How can I create this with CSS3 only? I am assuming this requires 2 divs? I know I can make a rectangle div and fill it back, and have yellow text. Though I don't know what I can do to make the triange shape on the left. Can it be done with done div only? Or does it need 2? Looking for the best way to do this.

Possible duplicate of [How do CSS triangles work?](https://stackoverflow.com/questions/7073484/how-do-css-triangles-work) — Ivan, Jul 30 '17 at 08:58

score 5 · Accepted Answer · answered Jul 30 '17 at 09:04

5

You can achieve this using linear-gradient. Demo:

.text {
  width: 400px;
  background-image: linear-gradient(45deg, transparent 50px, black 50px);
  padding-left: 100px;
  color: yellow;
}

<div class="text">
  <h1>Some Name Here</h1>
</div>

answered Jul 30 '17 at 09:04

Vadim Ovchinnikov

13,327
5
62
90

Michael Kolber · Answer 2 · 2017-07-30T04:25:23.330

3

Why not try something like this:

.triangle {
  width: 0;
  height: 0;
  border: 50px solid black;
  border-bottom-color: transparent;
  border-left-color: transparent;
  float: left;
}

.text {
  width: 400px;
  height: 100px;
  background-color: black;
  float: left;
  color: yellow;
}

<div class="triangle"></div>
<div class="text"><h1>Some Name Here</h1></div>

See How do CSS triangles work? for more info on this.

edited Jul 30 '17 at 04:25

answered Jul 30 '17 at 04:14

Michael Kolber

1,309
1
14
23

4

Additionally, you can use `::before` to do this so you don't need two elements. – jhpratt Jul 30 '17 at 04:16
@jhpratt I couldn't figure out how but I agree, that would be the more economical approach – Michael Kolber Jul 30 '17 at 04:26

score 1 · Answer 3 · edited Jul 30 '17 at 08:55

You can use of Pseudo Elements ::before or ::after

.triangle {
  padding: 10px;
  position: relative;
  background-color: #000;
  color: yellow;
  display: inline-block;
  margin-left: 40px;
}

.triangle::after {
  content: "";
  position: absolute;
  border: 19px solid #000;
  height: 0;
  width: 0;
  left: -38px;
  top: 0;
  bottom: 0;
  margin: auto;
  border-left-color: transparent;
  border-bottom-color: transparent;
}

<div class="triangle">
  text-here
</div>

Link for reference

Style Accordingly.

Vadim Ovchinnikov · Answer 4 · 2017-07-30T09:25:22.053

You can use clip-path but it has not so good browser support. I'm using 100vmax 100vmax here to achieve 45 degrees clipping. Demo:

.text {
  width: 400px;
  background-color: black;
  -webkit-clip-path: polygon(100vmax 100vmax, 0% 0%, 100% 0%, 100% 100%);
  clip-path: polygon(100vmax 100vmax, 0% 0%, 100% 0%, 100% 100%);
  padding-left: 100px;
  color: yellow;
}

<div class="text">
  <h1>Some Name Here</h1>
</div>

How do you create a div with a triangle shape using css only?

4 Answers4