#parallelogram p {transform: skew(-20deg);
<svg>
<polyline id="tri" points="0,0 100,0 100,50 60,50 50,50 40,50 0,50 0,0" stroke="red" stroke-width="5" fill="transparent"/>
<animate
xlink:href="#tri"
attributeName="points"
from="0,0 100,0 100,50 60,50 50,50 40,50 0,50"
to="0,0 100,0 100,50 60,50 50,60 40,50 0,50"
dur=".2s"
begin="mouseover"
fill="freeze" />
<animate
xlink:href="#tri"
attributeName="points"
from="0,0 100,0 100,50 60,50 50,60 40,50 0,50"
to="0,0 100,0 100,50 60,50 50,50 40,50 0,50"
dur=".2s"
begin="mouseout"
fill="freeze" />
</svg><meta name="viewport" content="width=device-width, initial-scale=1"><div>
<img src="http://lorempixel.com/150/150" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, totam.</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<div class="refl">
<img src="http://lorempixel.com/150/150" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, totam.</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>.refl{transform: scaley(-1);}.refl{transform: rotatex(180deg);}