Creating shapes with CSS.

Below you will find different shape css styles.

shapes.css

Css & Html

Square

.square {
  width: 100px;
  height: 100px;
  background: #222222;
}

<div class="square"></div>

Preview

Rectangle

.rectangle {
  width: 200px;
  height: 100px;
  background: #222222;
}

<div class="rectangle"></div>

Preview

Circle

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #222222;
}

<div class="circle"></div>

Preview

Oval

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

<div class="oval"></div>

Preview

Triangle Up

.triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #222222;
}

<div class="triangle-up"></div>

Preview

Triangle Down

.triangle-down {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid #222222;
}

<div class="triangle-down"></div>

Preview

Triangle Left

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

<div class="triangle-left"></div>

Preview

Triangle Right

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

<div class="triangle-right"></div>

Preview

Star

.star {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 90px solid #222222;
  position: relative;
}
.star:before {
  content: "";
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 90px solid #222222;
  position: absolute;
  top: 30px;
  left: -50px;
}

<div class="star"></div>

Preview

Heart

.heart {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: #222222;
  transform: rotate(-45deg);
}
.heart:before,
.heart:after {
  content: "";
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #222222;
  position: absolute;
}
.heart:before {
  top: -50px;
  left: 0;
}
.heart:after {
  left: 50px;
  top: 0;
}

<div class="heart"></div>

Preview