Сделать обычную форму div

Question

Как сделать div таким? Любые идеи, пожалуйста.

Вот мой код до сих пор: 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>

Answer 1

Попробуйте использовать clip-path

Support browsers

Пример

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

Answer 2

Вот быстрое решение, попробуйте:

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

Answer 3

С помощью CSS linear-gradient вы можете создать гибкий треугольник, который может расширяться, чтобы соответствовать высоте контейнера.

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