【问题标题】:Triangle bottom CSS with background带背景的三角形底部 CSS
【发布时间】:2015-09-02 14:07:12
【问题描述】:

*我知道它与 How to create a polygon shape div 重复,但我不知道如何在底部修复它。我真的尝试了一切,我不明白它是如何完成的。有人可以帮我吗? *

我正在对收到的设计进行切片。但是现在我遇到了一个问题。

我想将滑块的背景剪成三角形(见图)。

如何在 CSS3 中做到这一点?

注意:它必须是响应式的。

【问题讨论】:

  • 我想知道为什么这会被投反对票,无论如何,当人们知道回答反对票的帖子的人发生了什么时,他们不会回答......
  • @Froggiz 这个话题收到一些反对票的原因是因为它存在一个针对这个问题的话题,即使它与 OP 面临的问题不完全相同,OP 也没有展示了努力的证明,没有一行代码。
  • 我将使用伪元素前后的容器创建两个三角形。这应该可以帮助您入门:krasimirtsonev.com/blog/article/…
  • 作为为链接问题编写已接受答案的人,我绝对可以帮助澄清您的疑问,但您应该指定问题所在并显示您的代码。另外,请查看我在 cmets 中提供的this fiddle。它仍然是左侧的三角形切口(而不是底部),但它也是一个滑块(悬停图像以查看滑块的运行情况)。

标签: html css


【解决方案1】:

我认为clip-path 在这种情况下是最好的。见fiddle

background-image: url('image.jpg');
-webkit-clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);

【讨论】:

  • 你是我的英雄,我一直在寻找这个!
  • 很高兴为您提供帮助!祝你好运!如果你需要不同的形状,也可以查看这个网站bennettfeely.com/clippy
  • 啊,是的,在这种情况下,您需要使用 :before:after 方法,就像您链接的问题一样。这个工具可能会帮助apps.eky.hk/css-triangle-generator
猜你喜欢
  • 2016-01-25
  • 1970-01-01
  • 2020-02-27
  • 2013-07-16
  • 1970-01-01
  • 2012-06-13
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多