Creating a custom div form

Question

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

Here is my code: 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>

Run codeHide result

Answer 1

Try using clip-path

Browser support

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>

Run codeHide result

Answer 2

Here is a quick solution, try:

#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>

Run codeHide result

Answer 3

With CSS, linear-gradientyou can create a flexible triangle that can expand to fit the height of the container.

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

Run codeHide result