製作一個高的右側三角形作爲格的右側

enter image description here

我試圖獲得的「延遲付款」 div三角右端相匹配的樣機，如果可能的話使用CSS，而無需使用任何切片圖像，並且不使用任何絕對值像素使用或如果在添加更多文本後容器的尺寸發生變化，那麼任何可能會搞砸的東西。

HTML：

<div class="delay-your-payments"> 
    <h3>Delay Your Payments</h3> 
    <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </p> 
</div>

CSS：

div.delay-your-payments { background: #1AA3B4; padding: 20px; position: relative; width: 80%; } 
div.delay-your-payments:after { color: #1AA3B4; right: 0; position: absolute; content: "\25B6"; top: 50%; transform: translateY(-50%); right: -11px; } 
    div.delay-your-payments > h3 { color: #FFF; } 
    div.delay-your-payments > p { color: #FFF; }

來源

2015-04-06 Depak Chopra

這可能有幫助：http：//apps.eky.hk/css-triangle-generator/ –

@BrianGlaz可以用來使高度等於包含div的高度嗎？ –

可能不是，除非你已經知道包含div的高度。當然，你可以在頁面加載時使用javascript來獲取/設置它。 –

這裏是我的解決方案

div.delay-your-payments { float:left;background: #1AA3B4; padding: 20px; height:200px;position: relative; width: 80%; } 
 
    div.delay-your-payments > h3 { color: #FFF; } 
 
    div.delay-your-payments > p { color: #FFF; } 
 

 
.arrow-right { 
 
\t width: 0; 
 
\t height: 0; 
 
\t border-top: 100px solid transparent; 
 
\t border-bottom: 100px solid transparent; 
 
\t border-left: 100px solid green; 
 
    float:left; 
 
} 
 
*{ 
 
    box-sizing:border-box; 
 
}

<div class="delay-your-payments"> 
 
    <h3>Delay Your Payments</h3> 
 
    <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </p> 
 
</div> 
 
<div class="arrow-right"></div>

來源

2015-04-06 18:38:32 haykou

製作一個高的右側三角形作爲格的右側

回答

相關問題