如何在div底部制作三角形 [英] How to make a triangle shape in the bottom of the div

问题描述

大家好，我想知道如何在HTML和CSS中做到这一点.我知道明显的方法是在底部制作一个三角形的图像，但感觉不对.可以在HTML和CSS中做到吗?

Hi guys I'm wondering how to make this in HTML and CSS. I know the obvious way is to make a triangular shape image in the bottom but it feels wrong. Is it possible to do it in HTML and CSS?

这是一个Photoshop设计样机，我已经说过我有一个解决方案，但是只是想知道别人是否有另一种可能的解决方案就感觉不对.

This is a Photoshop Design Mockup and I already said I have one solution but it feels wrong just wanted to know if somebody has another possible solution.

推荐答案

我会选择

I'd go with clip-path to achieve something like this.

.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/

There's this great tool to easily generate the clip-path params: https://bennettfeely.com/clippy/

这篇关于如何在div底部制作三角形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！