Material Box

Material Box

WEB Design & Material Images

CSS - Rhombus


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

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

<div class="rhombus"></div>

In this CSS example, the "transform" property is used with "rotate" to rotate and "skew" to skew, transforming a square into a rhombus shape.

The values for "rotate" and "skew" can be specified in degrees (deg). A combination of these transformations results in the desired rhombus shape.

.rhombus {
	width: 200px;
	height: 200px;
	transform: rotate(45deg) skew(10deg, 10deg);
	background: royalblue;

CSS - Rhombus

TitleCSS - Rhombus