CODEWITHSUNDEEP
htmlcss
Rolando
Rolando

Reputation: 62596

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

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.

enter image description here

Upvotes: 1

Views: 6347

Answers (4)

Vadim Ovchinnikov
Vadim Ovchinnikov

Reputation: 14012

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>

Upvotes: 0

Vadim Ovchinnikov
Vadim Ovchinnikov

Reputation: 14012

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>

Upvotes: 5

Chandra Shekhar
Chandra Shekhar

Reputation: 3749

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.

Upvotes: 1

Michael Kolber
Michael Kolber

Reputation: 1429

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.

Upvotes: 3

Related Questions