如何在 CSS 中制作锥形截面边框？答案

【问题标题】：how do i go about making cone shaped section borders in CSS?如何在 CSS 中制作锥形截面边框？
【发布时间】：2016-06-27 20:40:36
【问题描述】：

您将如何创建如下所示的部分：？

看到横幅的边框是锥形的，现在早在我需要类似的东西时，我已经尝试过并使用以下内容：

<div>

</div>

CSS：

body {
  padding: 0;
  margin: 0;
}

div {
  height: 50px;
  background: #fff;
  box-shadow: 2px 0 5px rgba(0,0,0,.3);
  position: relative;
}

div:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 120px;
    right: 20px;
    -webkit-transform: rotate(20deg);
    -ms-transform: rotateX(20deg);
    -o-transform: rotateX(20deg);
    transform: rotateZ(-5deg);
    z-index: -1;
    background: red;
}

但我不确定在这种情况下使用相同的技巧是否会很好，因为圆锥形状需要在所有宽度上都存在，并且设计需要在所有设备上都相同。

那么如何在 CSS 中制作锥形截面边框？

【问题讨论】：

我建议使用 SVG（path 或 clipPath 或 mask）。你会从中得到一些想法 - stackoverflow.com/questions/35443763/…（它只有一侧有切口）。
你见过这个吗？ css-tricks.com/snippets/css/css-triangle 使用该技术，您可以定位这些三角形，以便它们覆盖传统的矩形内容区域。您可以简单地使用媒体查询为各种视口创建自定义尺寸。
@Harry 谢谢让我看一遍 :)
@ScottMarcus 老把戏，我不会用那个。不过谢谢！

标签： html css css-shapes

【解决方案1】：

您可以做到这一点的一种方法是将其设为background-image 并将其与 div 的顶部对齐。可能不是最好的方法，但如果一切都失败了，为什么不呢？

【讨论】：