How to make a parallelogram on one side in CSS? -
i trying make parallelogram in css, 1 side not straight, can both sides @ moment, like:
#parallelogram { width: 150px; height: 100px; -webkit-transform: skew(20deg); -moz-transform: skew(20deg); -o-transform: skew(20deg); background: red; }
which displays bent side on left , right. need on right.
how 1 this?
try using wrapper overflow: hidden;
, negative margin, hide left skewed side
#parallelogram { width: 150px; height: 100px; -webkit-transform: skew(20deg); -moz-transform: skew(20deg); -o-transform: skew(20deg); background: red; margin-left: -19px; /* (tangens(20deg)*100px)/2 */ } #wrapper{ overflow: hidden; }
<div id="wrapper"> <div id="parallelogram"></div> </div>
Comments
Post a Comment