JUSTCodaborate

Shapes CSS

.square {
  height: 90px;
  width: 90px;
  background-color: purple;
}

.circle {
  height: 80px;
  width: 80px;
  background-color: red;
  border-radius: 50%;
}

.oval {
  height: 50px;
  width: 100px;
  background-color: green;
  border-radius: 50%;
}

.rectangle {
  height: 50px;
  width: 100px;
  background-color: blue;
}

.parallelogram {
	width: 100px;
	height: 50px;
	transform: skew(20deg);
	background: pink;
}

.triangle-up {
	width: 0;
	height: 0;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	border-bottom: 50px solid yellow;
}

.triangle-down {
	width: 0;
	height: 0;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	border-top: 50px solid dodgerblue;
}

.triangle-left {
	width: 0;
	height: 0;
	border-top: 25px solid transparent;
	border-right: 50px solid #cad;
	border-bottom: 25px solid transparent;
}

.triangle-right {
	width: 0;
	height: 0;
	border-top: 25px solid transparent;
	border-left: 50px solid #dee;
	border-bottom: 25px solid transparent;
}

.trapezoid {
	border-bottom: 50px solid #26a2ab;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	height: 0;
	width: 125px;
}