如何在div底部制作三角形[重复]答案

【问题标题】：How to make a triangle shape in the bottom of the div [duplicate]如何在div底部制作三角形[重复]
【发布时间】：2017-12-15 16:05:14
【问题描述】：

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

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

【问题讨论】：

您有任何浏览器/版本的注意事项吗？为什么不检查该网站的代码并亲自查看？
希望您至少尝试自己编写代码。 Stack Overflow 不是代码编写服务。我建议你做一些additional research，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。 THIS HAS BEEN ASKED MANY TIMES BEFORE.
这是一个 Photoshop 样机顺便说一句
@pjc90 不知道他们正在使用边框，据我所知你不能在边框中有背景？

标签： html css

【解决方案1】：

我会选择clip-path 来实现这样的目标。

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

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

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

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

【讨论】：

哇！谢谢，这正是我需要的，不知道有这样的东西。非常感谢您的帮助！
请记住，此 CSS 属性尚未正式发布，仅受最新版本的 Chrome、Firefox 和 Opera 支持。不建议在生产环境中使用它，因为它不适用于 Safari 和 Internet Explorer，

【解决方案2】：

如果不为您绘制，我根本无法解释这一点。以下是你的做法，也许其他人可以填补空白。

不要考虑如何在三角形内部获取背景图像，而是让背景图像悬挂得比您需要的低，然后在图像下方的行顶部放置两个黑色三角形。这样一来，它提供了您的背景悬挂在下方的错觉，而实际上您只是隐藏了大部分。

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

&lt;div class="arrow-up"&gt;&lt;/div&gt;

【讨论】：

已经看到了，但那里不能有背景图片，对吧？
@MarkAnthony 与其考虑如何在三角形内获取背景图像，不如让背景图像悬挂得比您需要的低，并在图像下方的行顶部放置两个黑色三角形。这样一来，它提供了您的背景悬挂在下方的错觉，而实际上您只是隐藏了大部分。

【解决方案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>

【讨论】：