カスタム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

あなたは、コンテナの高さに合わせて拡張できる柔軟な三角形を作成することができCSS linear-gradientで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

を使用してみてください。

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