Material Box

Material Box

WEB Design & Material Images

CSS - Parallelogram

CSS

This is an example of code in HTML and CSS to create a parallelogram.


In HTML, the element that represents a parallelogram is a <div> with the class attribute set to "parallelogram".

<div class="parallelogram"></div>

To create the shape of a parallelogram, you can use the "transform" property with "skewX" to skew a square element.
The value to be specified in "skewX" is the angle in degrees, with "0" resulting in a perfect rectangle.

Alternatively, by setting a negative value for the "skewX" property, you can skew the square in the opposite direction, creating a parallelogram.

.parallelogram {
	width: 200px;
	height: 200px;
	transform: skewX(50deg);
	background: lightskyblue;
}

CSS - Parallelogram

TitleCSS - Parallelogram

CategoryCSS

Created

Update

AuthorYousuke.U