边界不寻常的部分

Question

我最近遇到了一个PSD模板,它有一个不寻常的三角形边框.我知道如何使用纯CSS创建三角形,但问题是(仅仅是为了感兴趣)关于这个图像:

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

Answer 1

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

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

您还需要调整内容位置,使其中的一部分也不会被剪裁.在我曾经padding-top实现过的片段中.您也可以使用其他方法,例如定位.

使用CSS:

使用CSS clip-path,您可以创建多边形路径并将元素剪切为所需的形状.这种方法的主要缺点是浏览器支持CSS剪辑路径.目前只有支持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转换和多个元素.