Make a custom div shape

Question

How to make a div like this? Any ideas please.

Here's my code so far: jsFiddle

.triangle-up-left {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 15px 0 0;
  border-color: #007bff transparent transparent transparent;
  position: absolute;
}

.category-span {
  padding: 10px;
  background-color: red;
}

<div class="row">
  <span class="category-span">Category</span><span class="triangle-up-left"></span>

</div>

score 3 · Answer 1 · answered Sep 10 '16 at 16:52

Here is a quick solution, try it:

#shape {
  border-top: 100px solid black;
  border-right: 60px solid transparent;
  width: 300px;
}
#text {
  margin-top: -70px;
  padding-left: 50px;
  color: white;
  font-size: xx-large;
}

<div id="shape"></div>
<div id="text">Category</div>

score 3 · Accepted Answer · answered Sep 14 '16 at 08:49

3

Try to use clip-path

Support browsers

Example

.category-span {
  padding: 10px 30px 10px 10px;
  background-color: red;
  -webkit-clip-path: polygon(100% 0, 86% 100%, 0 100%, 0 0);
clip-path: polygon(100% 0, 86% 100%, 0 100%, 0 0);
}

<div class="row">
  <span class="category-span">Ecommerce</span>
</div>

answered Sep 14 '16 at 08:49

Dmitriy

4,475
3
29
37

This works perfectly for me. – Mannu Nayyar Sep 15 '16 at 23:50

score 1 · Answer 3 · answered Sep 15 '16 at 06:06

With CSS linear-gradient you can create flexible triangle which can expand to fit the container height.

.category-span {
  background-color: #000;
  display: inline-block;
  vertical-align: top;
  margin-bottom: 20px;
  position: relative;
  max-width: 70%;
  padding: 10px;
  color: #fff;
}
.category-span:after {
  background: linear-gradient(to bottom right, #000 50%, transparent 50%);
  position: absolute;
  content: '';
  width: 20px;
  left: 100%;
  bottom: 0;
  top: 0;
}

<div class="row">
  <span class="category-span">Ecommerce Ecommerce Ecommerce</span>
  <span class="category-span">Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce </span>
  <span class="category-span">Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce Ecommerce </span>
</div>

Make a custom div shape

3 Answers3