SVG abstract shapes responsive -
so can make following path, need shape flipped flat joining line (x) on bottom. need stretch full width of container.
<svg id="bigtrianglecolor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewbox="0 0 100 102" preserveaspectratio="none"> <path d="m0 0 l30 50 l100 0 z"></path> </svg>
with respect flipping shape, can use transform on path, scaling y-axis -1. flip shape , "out" of view, need translate down. if want end same upper , lower boundaries pre-flipped (as opposed to, say, @ bottom of container, etc.) have translate down height of shape, i.e. 50px in example.
with respect wanting stretched full width of container, code in question contains answer, i.e. width="100%"
. shown placing triangle div
250px wide. contrast original shape (on left) width of 100
not 100%
.
div { width: 250px; height: 70px; border: solid red 2px; }
original: unflipped, untranslated, unstretched: <div> <svg id="bigtrianglecolor2" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100" viewbox="0 0 100 102" preserveaspectratio="none"> <path transform="translate(0, 0) scale(1, 1)" d="m0 0 l30 50 l100 0 z"></path> </svg> </div> altered: flipped, translated, stretched: <div> <svg id="bigtrianglecolor1" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewbox="0 0 100 102" preserveaspectratio="none"> <path transform="translate(0, 50) scale(1, -1)" d="m0 0 l30 50 l100 0 z"></path> </svg> </div>
Comments
Post a Comment