Question

我最近遇到了一个PSD模板，它与三角形有一个不寻常的边界。我知道如何使用纯CSS创建三角形，但问题是（仅仅是为了感兴趣）关于这个图像：

这些是仅通过已经像这样切割的背景创建的，还是可以使用相同的CSS来创建？

Answer 1

有多种方法可以实现这种形状。使用clip-path，CSS三角形，SVG，Canvas和图像背景就是其中的一部分。每种方法都有各自的优缺点。如果不完全了解您的需求，我们无法建议您。您应该选择最适合您需求的方法。通常我会建议使用SVG 来创建这样复杂的路径/形状。

下面是一些使用CSS和SVG clip-path功能创建此示例的示例代码段。它不是100％完全按照您的要求，但我会将微调部分留给您。

您还需要调整内容位置，使其中的一部分也不会被剪裁。在该片段中，我使用padding-top来实现此目的。您也可以使用其他方法，例如定位。

使用CSS：

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

使用SVG：

SVG clip-path在处理CSS版本方面非常相似，只是它具有比CSS版本更好的浏览器支持。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

Answer 2

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

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

当然，如果没有看到标记和CSS，几乎不可能确定设计师如何处理它。当然，你可以很容易地检查源代码，自己找到答案......

边界不寻常的部分

2 个答案: