divの底に三角形

Question

divの下に三角形を撮るのに問題があります。下の画像で分かります。この3つの部門はフレックスボックスに入っています。

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の背景画像を使用することをお勧めして、ボックスの下部全体に伸ばします。

私はを作成しました。

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