制作一个高的右侧三角形作为格的右侧

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

制作一个高的右侧三角形作为格的右侧

回答

相关问题