如何在div的底部制作三角形

Question

大家好我想知道如何在HTML和CSS中制作它。我知道显而易见的方法是在底部制作一个三角形图像，但感觉不对。是否可以在HTML和CSS中进行？

编辑：这是一个Photoshop设计样机，我已经说过我有一个解决方案，但感觉不对，只是想知道是否有人有其他可能的解决方案。

Answer 1

如果不为你提供，我根本无法解释。这是你如何做到这一点，也许其他人可以填补空白。

不考虑如何在三角形内部获得背景图像，而是使背景图像低于您需要的背景图像，并在图像下方的行顶部放置两个黑色三角形。这样它就会让你觉得背景悬挂在下面，而实际上你只是隐藏了大部分背景。

.arrow-up {
  width: 0; 
  height: 0; 
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  
  border-bottom: 100px solid black;
}

<div class="arrow-up"></div>

Answer 2

我和clip-path一起去实现这样的目标。

＆＃13;

＆＃13;

.clipped {
  clip-path: polygon(100% 0%, 100% 70%, 50% 90%, 50% 90%, 0 70%, 0 0);
}

img {
  max-width: 100%;
  width: 100%;
}

＆＃13;

<div class="clipped">
  <img src="https://loremflickr.com/1280/720">
</div>

＆＃13;

＆＃13;

＆＃13;

这个很棒的工具可以轻松生成clip-path参数： https://bennettfeely.com/clippy/

Answer 3

@JordiNebot答案是我认为我们最终会降落的地方，但clip-path还没有被完全包括在内。如果你想确保它在任何地方运行良好，我会按照以下方式做一些事情。创建两个从中间位置构建的三角形，远远超出您期望的需要，然后将它们放置在包含图像的div底部中间的绝对位置。

这项工作要多得多，但它可以在所有平台上更好地工作。

.main {
  position: relative;
  overflow: hidden;
width: 100%;
 }
    
.leftArrow {
   position: absolute;
   width: 0;
   right: 50%;
   height: 0;
   bottom: 4px;
   border-right: 500px solid transparent;
   border-bottom: 100px solid black;
}

.rightArrow {
   position: absolute;
   left: 50%;
   bottom: 4px;
   width: 0;
   height: 0;
   border-left: 500px solid transparent;
   border-bottom: 100px solid black;
}

img {
  max-width: 100%;
  width: 100%;
  }

 <div class="main">
      <img src="https://loremflickr.com/1280/720">
      <div class="leftArrow"></div>
      <div class="rightArrow"></div>
    </div>