The Shapes of CSS

[PolluxLee]

Shape

shape.html

<div class="shape">
  <div class="shape__circle"></div>
  <div class="shape__oval"></div>
  <div class="shape__triangle"></div>
  <div class="shape__triangle--topleft"></div>
  <div class="shape__trapezoid"></div>
  <div class="shape__parallelogram"></div>
  <div class="shape__bubble"></div>
  <div class="shape__moon"></div>
  <div class="shape__pointer"></div>
  <div class="shape__yinyang"></div>
</div>

shape.scss

$blue-grey: #607D8B;

.shape {
  display: flex;
  flex-wrap: wrap;

  div {
    box-sizing: border-box;
    margin: 20px;
  }

  &__circle {
    width: 100px;
    height: 100px;
    background: $blue-grey;
    border-radius: 50px;
  }

  &__oval {
    width: 200px;
    height: 100px;
    background: $blue-grey;
    border-radius: 90px/50px;
  }

  &__triangle {
    width: 0;
    height: 0;
    border-radius: 50%;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid $blue-grey;
  }

  &__triangle--topleft {
    width: 0;
    height: 0;
    border-left: 100px solid $blue-grey;
    border-bottom: 100px solid transparent;
  }

  &__trapezoid {
    width: 200px;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid $blue-grey;
  }

  &__parallelogram {
    width: 150px;
    height: 100px;
    transform: skew(-15deg,0deg);
	  background: $blue-grey; 
  }

  &__bubble {
    width: 200px;
    height: 50px;
    background: $blue-grey;
    border-radius: 5px;
    position: relative;

    &::before {
      width: 0;
      height: 0;
      content: "";
      position: absolute;
      right: 100%;
      top: 50%;
      transform: translateY(-50%);
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
      border-right: 8px solid $blue-grey;
    }
  }

  &__moon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    box-shadow: 15px 15px 0 0 $blue-grey;
  }

  &__pointer {
    width: 200px;
    height: 40px;
    background: $blue-grey;
    position: relative;

    &::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 100%;
      transform: translateY(-50%);
      border-top: 20px solid transparent;
      border-bottom: 20px solid transparent;
      border-left: 30px solid $blue-grey;
    }

    &::before {
      content: "";
      position: absolute;
      top: 50%;
      right: 100%;
      transform: translate(100%,-50%);
      border-top: 20px solid transparent;
      border-bottom: 20px solid transparent;
      border-left: 30px solid white;
    }
  }

  &__yinyang {
    width: 96px;
    height: 96px;
    background: white;
    border-color: $blue-grey;
    border-style: solid;
    border-width: 2px 2px 50px 2px;
    border-radius: 100%;
    position: relative;

    &::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      background: white;
      border: 18px solid $blue-grey;
      border-radius: 100%;
      width: 10px;
      height: 10px;
    }

    &::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      background: $blue-grey;
      border: 18px solid white;
      border-radius:100%;
      width: 10px;
      height: 10px;
    }
  }
}

Full Demo

Demo

References

The Shapes of CSS