Tested in Chrome 49 at work, the angled image is only 1500px wide, so a hard edge is visible on one side for widescreen monitors.

This isn't responsive to the view port size so it can overlap content on some screens. If you want to make the height of the angle reactive to the view port width or height just go into the angled-edges.scss file and use control-f to replace px with vw or vh
Not really an issue, just pointing it out for those who might not know.

Recently working on a project that had this included but the mixin name as well as its params do not match up with the current documentation.

There are no pre-rendered, sass code examples, including on the demo page. In fact, when I try the one example in the readme, it triggers the coded exception. Bummin.

I am a beginner in css, and I was hurt by curiosity when I failed in your repository.

Why do you use SVG instead of the clip-path property ?

I think about something like this pen.

Cheers,

First of thanks for the great mixin. I would like to request ability to use percentages or other measurements for height and width of the SVG image.

Hi,
Would it be possible to add left/right inside/outside edge support to build trapezoid shape ?

Is this meant to be a fixed angle/height?

I see height can be changed globally on line 80, but is there an argument to set it per element (without duplicating the whole mixin)?

Hello, first of all thanks for easy to use and lightweight tool. I ported it to Stylus. Can you add link in your readme?

I have not npm and bower package yet, but i will do it in the near future.

https://github.com/OlegWock/stylus-angled-edges

Incredibly useful plugin – would be nice to see it as a Tailwind plugin, but it's still easy enough to integrate in the build chain as scss. :)

Wondering – shouldn't it be possible to use this as an image mask, so that you didn't need to set the color to match different backgrounds, or create extra code in the case of supporting a website's dark mode?

Sometimes the designer changes the angle so it's not 10deg but 2 or 3deg.

I'm getting a problem where on iOS the svg background is padded by around 15px.

I think this relates to a common svg bug with iOS, but most of the solutions seem to relate to svg image elements rather than svg backgrounds - the 1% hack, and declaring 100% width/height.

typical implementation for me is …

.banner-bottom-text {

	width: 100%;
	@include angled-edge(
			$location:'inside bottom',
			$hypotenuse: 'upper left',
			$fill: $col-brand-tertiary,
			$width: 1500,
			$height: 100
			);

			opacity: 0.7;	
		&::before {
			background-size: 100% 100%;
			}
}

Any ideas?

BTW Thanks for an amazing mixin and very much +1 on liquid dimensions please.

First off, thanks for making this, it's brilliant!

I've just hit on a small problem though when testing a site on Android. I'm getting what looks like a 1px gap on the straight edge.

I've also just had a look at your demo site on Android, just to check to make sure it wasn't something I was doing and you can see the same thing happening on the first example. The odd thing is that if I pinch and zoom in and then out again the gap disapears.

Any ideas why this might be happening?

I just tried to view the demo on Firefox (46, on linux) and nothing shows up, as the screenshot shows.

Inspect says "cannot load image" when you hover over the url, but that could just be a normal thing for data urls.

Hi,

is there a way to set a transparancy for the angles? If i use for example rgba(0,166,141,.8) nothing happens.

Hello - Thanks for your awesome script! I noticed a subpixel rounding issue with chrome zoom levels (not with your code) where it looks like there is a border where the svg overlaps a div above or below the one where your svg object is attached. This is simply fixed by adding a 1px border to the div that your svg is attached to with the same background color as the svg object. This is not an issue with your code, but I wanted to help others if they are struggling w/ this chrome issue!