4 ms·
More obvious if you use a polygon rather than a path object: <svg height=10 width=20> <polygon fill=red stroke-width=0 points="0,10 20,10 10,
by lambda 13y ago
More obvious if you use a polygon rather than a path object:
<svg height=10 width=20>
<polygon fill=red stroke-width=0
points="0,10 20,10 10,0" />
</svg>
And you can put it in your CSS using a data URI:
.triangle {
background: url("data:image/svg+xml;charset=utf-8,<svg height='10' width='20' xmlns='http://www.w3.org/2000/svg'><polygon fill='red' stroke-width='0' points='0,10 20,10 10,0' /></svg>") no-repeat left center;
width: 20px;
height: 10px;
}
- ygra 13y agoI'm more comfortable with the path syntax, and polygons are pretty much the same as a path, except that you would prepend M and append z to the list of points (for certain buggy renderers it might be necessary to put an L inside, too). Paths have handy shorthands for horizontal, vertical and relative movement, though.
- lambda 13y agoIf you're more comfortable with it, that's great. To someone who's not already comfortable with it, points="0,10 20,10 10,0" is a lot more obvious than d='M0,20h20L10,0'