In the past, the only option to achieve this was using SVG images. Today, we can have multiple solutions and I’ll try my best to show you all possibilities. Personally, I think that for simple sloped edges, we can use border property in CSS as the best solution, but for more complex shapes, we should still stick with SVG. Personally, I think that for simple sloped edges, we can use border property in CSS as the best solution, but for more complex shapes, we should still stick with SVG. Since the time of this writing, you’ve probably come across many web applications that already have some creative design solutions for their sections. Angled/Sloped edges are nothing new, but we should investigate this further and try all possible solutions for this nifty feature… design A couple of possible solutions… I wrote a couple of CodePen examples. They all look identical in the end, but there are some pros and cons as always, to each one. I’ll write about cons, but you decide about pros… CodePen pros cons 1. Solution using “border” property in CSS CON: Depends upon viewport unit Depends upon viewport unit Sloped Edge — Solution using “border” property in CSS 2. Solution using “transform” property in CSS, specifically “skewY” function transform CON: Horizontal resize breaks it Horizontal resize breaks it Sloped Edge — Solution using “transform: skewY()” property in CSS 3. Solution using “clip-path” property in CSS, specifically “polygon” function clip-path CONS:- Vertical resize breaks it- Bad browser coverage Vertical resize breaks it Bad browser coverage Sloped Edge — Solution using “clip-path: polygon()” property in CSS 4. Solution using “SVG” image in HTML SVG CONS: - It makes your HTML messy- Duplication of SVG images for various sections- Creating new SVG images for different angles Sloped Edge — Solution using “SVG” images in HTML A couple of extras… Using one of the solutions from above, but developed to be flexible for use across the entire application. Solution using “Sass Mixin by Joseph Fusco” Joseph Fusco that embeds “SVG” in “background-image” property in CSS that embeds “SVG” in “background-image” property in CSS If you like this approach, check his Angled Edges repository on GitHub for more information. This mixin supports a couple of different positions and you might want to check official example as well. official example josephfusco/angled-edges_angled-edges - 📐 Quickly create angled section edges using only Sass_github.com josephfusco/angled-edges josephfusco/angled-edges _angled-edges - 📐 Quickly create angled section edges using only Sass_github.com **Personal Review:**This Mixin has unclear documentation in README file and lacks the source-maps in a demo. It shows CSS instead of SCSS, so people might have some trouble implementing this. Although, I just had issues figuring how to use _$_position and $hypotenuse arguments. By playing around with it, I figured out how to implement it to match other examples. It has some cons too, but I’ll let you try to figure them out in comments? **Personal Review:**This Mixin has unclear documentation in README file and lacks the source-maps in a demo. It shows CSS instead of SCSS, so people might have some trouble implementing this. Although, I just had issues figuring how to use _$_position and $hypotenuse arguments. By playing around with it, I figured out how to implement it to match other examples. It has some cons too, but I’ll let you try to figure them out in comments? CSS _$_position $hypotenuse Sloped Edge — Solution using “Angled Edges” Sass Mixin, developed by Joseph Fusco Solution using “Sass Mixin by Nenad Novaković (that’s me)” Nenad Novaković using “border” property in CSS using “border” property in CSS My personal preference for Sloped Edges is by using “border” property. If you’re like me and prefer this approach, I highly suggest you to check out my Sloped Edge repository on GitHub for more information. There are a couple of possibilities with this mixin, as it supports a few different options. Not only that it works for right and left angles, it also has in and out option and it is not made only for vertical layouts, but horizontal layouts as well. right left in out vertical layouts horizontal layouts dvlden/sloped-edge_sloped-edge - Sass mixin that helps you build sloped section edges with a consistent angle._github.com dvlden/sloped-edge dvlden/sloped-edge _sloped-edge - Sass mixin that helps you build sloped section edges with a consistent angle._github.com Make sure to check out both layout examples with all possible use cases: Make sure to check out both layout examples with all possible use cases: Vertical Example Horizontal Example Vertical Example Vertical Example Horizontal Example Horizontal Example Sloped Edge — Solution using “Sloped Edge” Sass Mixin, developed by Nenad Novaković If you like either one of the extra solutions, please make sure to throw a 🌟 on GitHub as it means a lot to developers. You might also find a solution with CSS property transform: rotate() elsewhere, but it requires an “overflow: hidden” property to its parent. I find that to be very bad and should not be even considered as a solution. transform: rotate() not be even considered as a solution Until next time If you enjoyed this and learned something new, please share some love.To do so, tap the clap icon 👏 or hold it for more claps! 👏👏👏 Much appreciated. You’re the best!
