Today I learned

Inline SVG in CSS

Author photoRico Sta. CruzMarch 02, 2015

You can create complex shapes easily by combining SVG and CSS. Demo here of a white triangle notch implemented using inline CSS, perfect for making parallelograms. The caveats:

.box {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1000' height='20' version='1.1'><polyline fill='white' points='0,0 1000,0 0,20'/></svg>")
    left top / 100% auto no-repeat;
}

IE9+ supported, legacy IE's arent. Also, hex color codes are not supported. Use rgb(0, 100, 200) instead.

You have just read Inline SVG in CSS, written on March 02, 2015. This is Today I Learned, a collection of random tidbits I've learned through my day-to-day web development work. I'm Rico Sta. Cruz, @rstacruz on GitHub (and Twitter!).

← More articles