【问题标题】:CSS Design Advice - abnormal CSS polygons with border-radius and box shadow [duplicate]CSS 设计建议 - 具有边框半径和框阴影的异常 CSS 多边形 [重复]
【发布时间】:2019-10-29 11:58:10
【问题描述】:

所以我正在尝试在 CSS 的高级领域练习我的 CSS 技能,我必须说,我在使用以下设计重新创建 DIV 时完全被难住了:

所以本质上我希望 div 有一个“异常多边形形状/边框”,但我不知道我将如何去做(加上一个盒子阴影)。我相信您可以使用剪辑路径吗?但我不是 100% 确定..

编辑:为了更清楚,我正在尝试找到一种解决方案,它允许:响应能力、异常形状周围的边框半径以及盒子阴影,这比其他一些问题更复杂,

【问题讨论】:

  • 有点,但不完全。我已经知道剪辑路径的技巧,但它并没有解决我使用 box-shadow 的解决方案。 Clip-path 会切断路径之外的任何东西,包括阴影。
  • 阅读所有答案,不仅有剪辑路径的想法
  • 嗯,我明白了。一种是使用透视来创造效果。我可能会试一试。我认为让 div 响应可能有点棘手。
  • 实际上也关于该主题,根据我发布的图片,这种技术可能不适用于边框半径。所以本质上,我试图想出一种方法来提供盒子阴影、边框半径、异常形状和响应能力。
  • 你说只是在寻找技巧 --> 我给你的不仅仅是一个技巧,所以你可能会花一点力气尝试一下我给你的东西?作为旁注,你的问题是题外话

标签: html css


【解决方案1】:

您正在寻找的关键词之一 -> SVG,剪辑路径

看这里 -> How to make area be irregular shape not rectangle? 或在这里 -> https://css-tricks.com/creating-non-rectangular-headers/

【讨论】:

  • 那篇 CSS 技巧文章很有帮助。谢谢你
猜你喜欢
  • 1970-01-01
  • 2012-10-14
  • 1970-01-01
  • 1970-01-01
  • 2017-05-01
  • 1970-01-01
  • 1970-01-01
  • 2020-10-16
  • 1970-01-01
相关资源
最近更新 更多