Machen Sie eine benutzerdefinierte Div-Form

Question

Wie man ein div so machen? Irgendwelche Ideen bitte.

hier so weit mein Code ist: 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

Try clip-path

Support browsers

Beispiel

.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

Hier ist eine schnelle Lösung ist, versuchen Sie es:

#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

Mit CSS verwenden linear-gradient Sie flexible Dreieck erstellen können, die sich ausdehnen können die Behälterhöhe angepasst.

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