bootstrap连续删除div之间的空间[重复]答案

【问题标题】：bootstrap remove space between divs in a row [duplicate]bootstrap连续删除div之间的空间[重复]
【发布时间】：2021-02-08 09:12:14
【问题描述】：

我想创建一个这样的形状

这是我的代码：

<section style="background-color: red;">
    <div>
       <div class="row justify-content-center px-4 d-flex flex-column">
           <div class="col-lg-4 text-center py-5 rounded" style="background: white">
               <p>Let's work together!</p>
               <a href="#" target="_blank" class="btn btn-primary mt-4" style="color: #3E7DC0; border-radius: 8px;">
              <span style="font-weight: 900;"><mdicon name="whatsapp"/> Contact us now!</a><br>
           </div>
           <div class="down-triangle align-self-center p-0"></div>
       </div>
       <div class="col-lg-4">
          <img src="image.png">
       </div>
   </div>
</section>

这是我的小三角形的 CSS

.down-triangle {
    width: 0; 
    height: 0; 
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    border-right:40px solid white; 
    border-radius: 4px;
    transform: rotate(270deg);
}

使用该代码，这是我得到的图片

我的问题是，如何删除这两个 div 之间的间距？我已经尝试过margin bottom 和padding bottom，但它不起作用。非常感谢。

【问题讨论】：

嗨，你能提供你的完整代码
@Themodmin 完成！

标签： html css bootstrap-4

【解决方案1】：

您可以使用relative 作为您的位置，这样您就可以相对于top 控制位置，如下所示：

.down-triangle {
top: -20px;
position: relative;
width: 0; 
height: 0; 
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-right:40px solid white; 
border-radius: 4px;
transform: rotate(270deg);}

【讨论】：

成功了！太感谢了！！我打算尝试这种方法，但我不知道这是否是最好的方法

【解决方案2】：

您可以尝试在您的 css 文件中添加一个填充属性。它应该是这样的：

.down-triangle {
   width: 0; 
   height: 0; 
   border-top: 40px solid transparent;
   border-bottom: 40px solid transparent;
   border-right:40px solid white; 
   border-radius: 4px;
   padding: 0
   transform: rotate(270deg);
}

如果这不起作用，您总是可以尝试将正方形的填充设置为 0，因为这可能是问题所在，或者使用负边距。

【讨论】：

谢谢！非常感谢您的帮助！