在div底部的三角形

Question

我在div的底部有一個三角形的問題，如下圖所示。這三個div在flexbox中。

HTML代碼：

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