div底部的三角形

Question

我在div的底部有一个三角形有问题，如下图所示。这三个div在flexbox中。

HTML code：

<section class="main_content">
    <div class="1st_class">
        <div class="features">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua.</p>
            <div class="triangle"></div>
        </div>
        <div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua.</p> 
        </div>
        <div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>

Answer 1

如果您需要灵活的解决方案，我建议您使用三角形的SVG背景图像，然后将其拉伸到框的底部。

我创建了jsFiddle以显示我的意思。

.active:after {
   content: '';
   position: absolute;
   bottom: -15px;
   left: 0;
   width: 100%;
   height: 15px;
   background-size: 100% 100%;
   background-image: url(triangle.svg);
}