制作一个高大的，右指向的三角形是div的右侧

Question

我正在研究的部分模型如下。

我试图获得＆＃34;延迟付款的三角形右端＆＃34; div匹配模型，如果可能的话，使用CSS而不使用任何切片图像，并且不使用任何绝对值的像素或任何会在添加更多文本后容器的尺寸发生变化时搞砸的东西。

尝试：http://jsfiddle.net/a7L3tytp/

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; }

Answer 1

这是我的解决方案

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 {
	width: 0; 
	height: 0; 
	border-top: 100px solid transparent;
	border-bottom: 100px solid transparent;
	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>