具有不寻常边界的部分 [英] Sections with unusual borders

问题描述

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

这些是由已经剪切的背景创建的，或者我可以使用相同的CSS？

解决方案

有多种方法可以实现这种形状。使用 clip-path ，CSS三角形，SVG，画布和图像背景是其中的一些。每种方法都有自己的优点和缺点。我们不能建议一个没有完全了解你的需要。你应该选择最适合你需要的方法。一般来说，我会建议使用SVG 来创建这种复杂的路径/形状。

下面是一些使用CSS和SVG clip-path 功能。它不是100％完全如你想要的，但我会离开微调部分给你。

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

---

使用CSS： b
$ b

使用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：多边形（0％25％，40％5％，55％20％，60％15％，75％25％，100％10％，100％100％，0％100％剪切路径：多边形（0％25％，40％5％，55％20％，60％15％，75％25％，100％10％，100％100％，0％100％只是用于演示* / body {background：url（http://lorempixel.com/600/400/abstract/1）;} * {margin：0; padding：0;}  

 < div class = -border>部分内容< / 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）;} / *只是演示* / body {background：url（http://lorempixel.com/600/400/abstract/1）;} * {margin： 0; padding：0;}  

 < svg width =0 height =0> < defs> < clipPath id =unusual-borderclipPathUnits =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>一些内容< / div>   
 
 
 请注意：IE不支持剪辑路径（任一版本）。如果您希望支持IE，那么您可以使用纯SVG路径元素（不 clipPath ）创建背景图像（或）使用图像（或）使用复杂的CSS转换多元素。我会当然不建议使用CSS转换和多个元素。
 
I recently ran into a PSD template that has an unusual border with triangles. I know how to create triangles by itself using pure CSS, but the question is (just for interest) about this images:




Are these created just by a background that is already cut like this, or can I do it using the same CSS?
解决方案
There are multiple ways in which this shape could be achieved. Using clip-path, CSS triangles, SVG, Canvas and image backgrounds are some of them. Each method has their own pros and cons. We cannot suggest one without knowing your needs fully. You should choose the method which fits your needs the best. Generally I would suggest using SVG to create such complex paths/shapes.

Below are a couple of sample snippets for creating this with CSS and SVG clip-path feature. It is not 100% exactly as you want it to be but I would leave the fine tuning part to you. 

You would also need to adjust the content position such that part of it also doesn't get clipped. In the snippet I have used padding-top to achieve this. You can use other methods like positioning also.



Using CSS:

Using CSS clip-path, you can create a polygonal path and clip the element into the required shape. The main drawback of this approach would be the poor browser support for CSS clip-paths. Currently only Webkit powered browsers support the CSS clip-path feature.



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







Using SVG:

SVG clip-path is very similar in working to the CSS version except that it has much better browser support than its CSS counterpart. 



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





Note: Clip paths (either version) are not supported in IE. If you wish to support IE then you can use pure SVG path element (not clipPath) to create the background image (or) use an image (or) use complex CSS transformations with multiple elements. I would certainly not recommend using CSS transformations and multiple elements.

                        
这篇关于具有不寻常边界的部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！