Sections with unusual borders - html

Question

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?

Answer 1

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.

Answer 2

Technically you could build something like that using pure CSS3, but that doesn't mean that it's a good idea.
More than likely, the template uses transparent PNG images which are defined as the background-image to the section's :before and :after pseudo-elements. Another option may be the use of <canvas>, or SVG.
Of course, without seeing the markup and CSS, it's almost impossible to say for certain how this designer has handled it. And of course you could have quite easily checked the source code to find the answer yourself...