具有异常边框的部分

Question

我最近运行进入了一个 PSD 模板，该模板具有不寻常的三角形边框。我知道如何使用纯 CSS 自行创建三角形，但问题是（仅出于兴趣）关于此图像：

这些是由已经切割成这样的背景创建的，还是我可以使用相同的 CSS 来创建？

Answer 1

从技术上讲，您可以使用纯 CSS3 构建类似的东西，但这并不意味着它是个好主意。

更有可能的是，该模板使用透明的 PNG 图像，这些图像被定义为该部分的 :before 和 :after 伪元素的 background-image。另一种选择可能是使用 <canvas> 或 SVG。

当然，在没有看到标记和 CSS 的情况下，几乎不可能确定这位设计师是如何处理它的。当然，您可以很容易地检查源代码来自己找到答案...

Answer 2

有多种方法可以实现这种形状。使用 clip-path、CSS 三角形、SVG、Canvas 和图像背景是其中的一部分。每种方法都有自己的优点和缺点。在不完全了解您的需求的情况下，我们无法提出建议。您应该选择最适合您需要的方法。通常我 会建议使用 SVG 来创建这样复杂的 paths/shapes.

下面是使用 CSS 和 SVG clip-path 功能创建此内容的几个示例片段。它不是 100% 完全如您所愿，但我会将微调部分留给您。

您还需要调整内容位置，使其部分内容也不会被剪裁。在代码片段中，我使用了 padding-top 来实现这一点。您也可以使用定位等其他方法。

使用CSS:

使用CSS clip-path，您可以创建多边形路径并将元素裁剪成所需的形状。这种方法的主要缺点是 the poor browser support for CSS clip-paths。目前只有 Webkit 驱动的浏览器支持 CSS clip-path 特性。

.unusual-border{
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  padding-top: 10%;
  background: rgb(74,139, 207);
  -webkit-clip-path: polygon(0% 25%, 40% 5%, 55% 20%, 60% 15%, 75% 25%, 100% 10%, 100% 100%, 0% 100%);
  clip-path: polygon(0% 25%, 40% 5%, 55% 20%, 60% 15%, 75% 25%, 100% 10%, 100% 100%, 0% 100%);
}

/* Just for demo */
body{
  background: url(http://lorempixel.com/600/400/abstract/1);
}
*{
  margin: 0;
  padding: 0;
}

<div class="unusual-border">Some content</div>

使用 SVG：

SVG clip-path 在工作上与 CSS 版本非常相似，除了它比 CSS 版本有更好的浏览器支持。

.unusual-border {
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  padding-top: 10%;
  background: rgb(74, 139, 207);
  -webkit-clip-path: url("#unusual-border");
  clip-path: url("#unusual-border");
}

/* Just for demo */

body {
  background: url(http://lorempixel.com/600/400/abstract/1);
}
* {
  margin: 0;
  padding: 0;
}

<svg width="0" height="0">
  <defs>
    <clipPath id="unusual-border" clipPathUnits="objectBoundingBox">
      <path d="M0,0.25 0.4,0.05 0.55,0.2 0.6,0.15 0.75,0.25 1,0.1 1,1 0,1z" />
    </clipPath>
  </defs>
</svg>
<div class="unusual-border">Some content</div>

注意： IE 不支持剪辑路径（任一版本）。如果您希望支持 IE，那么您可以使用纯 SVG 路径元素（不是 clipPath）来创建背景图像（或）使用图像（或）对多个元素使用复杂的 CSS 转换。我 当然不推荐使用 CSS 转换 和多个元素。

具有异常边框的部分

Sections with unusual borders

html

css

css-shapes