I am trying to make a shape similar to a parallelogram, but without the angle on the right side. So it will keep its straight up and down line on the right, but the left side will keep its angle. Here is a fiddle: http://jsfiddle.net/2hj88xts/
CSS:
#parallelogram {
width: 250px;
height: 100px;
transform: skew(-15deg);
background: red;
}
You could try using a border-left with transparent as the color and abandon the *-transform's altogether. This would require a CSS change but no additional HTML markup:
Current Angle:
#parallelogram {
width: 250px;
height: 0;
border-bottom: 100px solid red;
border-left: 30px solid transparent;
margin-left: 10px;
}<div id="parallelogram"></div>To adjust the left angle simply tweak the border-left pixel amount. The larger the pixel amount, the more shallow the angle. The smaller the pixel amount, the steeper the angle.
Shallow Angle:
#parallelogram {
width: 250px;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
margin-left: 10px;
}<div id="parallelogram"></div>Steep Angle:
#parallelogram {
width: 250px;
height: 0;
border-bottom: 100px solid red;
border-left: 15px solid transparent;
margin-left: 10px;
}<div id="parallelogram"></div>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments