.example-square {
  width: 100px;
  height: 100px;
  background-color: #333;
}
.example-square-border-same {
  width: 200px;
  height: 200px;
  border-top:15px solid #990000;
  border-left:15px solid #000000;
  border-bottom:15px solid #340;
  border-right:15px solid #440000;
}
.example-square-border-diff {
  width: 200px;
  height: 200px;
  border-top:15px solid #990000;
  border-left:30px solid #000000;
  border-bottom:25px solid #340;
  border-right:20px solid #440000;
}
.example-rectangle {
  width: 200px;
  height: 100px;
  background-color: #333;
}
.example-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #333;
}
.example-oval {
  width: 200px;
  height: 100px;
  background-color: #333;
  border-radius: 100px/50px;
  /*border-top-left-radius:     100px 50px;*/
  /*border-top-right-radius:    100px 50px;*/
  /*border-bottom-right-radius: 100px 50px;*/
  /*border-bottom-left-radius:  100px 50px;*/
}
.example-triangle-up {
  width: 100px;
  height: 100px;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #333;
}
.example-triangle-down {
  width: 100px;
  height: 100px;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid #333;
}
.example-triangle-right {
  width: 100px;
  height: 100px;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 100px solid #333;
}
.example-triangle-left {
  width: 100px;
  height: 100px;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-right: 100px solid #333;
}

.example-trapezoid1 {
  width: 200px;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #333;
}
.example-trapezoid2 {
  position: relative;
  width: 200px;
  height: 100px;
  background-color: #333;
}
.example-trapezoid2:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-right: 50px solid transparent;
  border-top: 100px solid #fff;
}
.example-trapezoid2:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  border-left: 50px solid transparent;
  border-top: 100px solid #fff;
}

.example-parallelogram1 {
  width: 200px;
  height: 100px;
  transform: skew(-10deg);
  background-color: #333;
}
.example-parallelogram2 {
  position: relative;
  width: 200px;
  height: 100px;
  background-color: #333;
}
.example-parallelogram2:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-right: 20px solid transparent;
  border-top: 100px solid #fff;
}
.example-parallelogram2:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  border-left: 20px solid transparent;
  border-bottom: 100px solid #fff;
}

.example-diamond {
  position: relative;
  width: 200px;
  height: 100px;
  background-color: #333;
}
.example-diamond:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-right: 100px solid transparent;
  border-top: 50px solid #fff;
  border-bottom: 50px solid #fff;
}
.example-diamond:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-left: 100px solid transparent;
  border-top: 50px solid #fff;
  border-bottom: 50px solid #fff;
}

.example-pentagon {
  position: relative;
  width: 162px;
  height: 154px;
}
.example-pentagon:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  border-bottom: 59px solid #333;
  border-left: 81px solid transparent;
  border-right: 81px solid transparent;
}
.example-pentagon:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  box-sizing: border-box;
  width: 162px;
  border-top: 95px solid #333;
  border-left: 31px solid transparent;
  border-right: 31px solid transparent;
}

.example-hexagon {
  position: relative;
  width: 200px;
  height: 174px;
}
.example-hexagon:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  width: 200px;
  border-bottom: 87px solid #333;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}
.example-hexagon:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  box-sizing: border-box;
  width: 200px;
  border-top: 87px solid #333;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}

.example-octagon {
  position: relative;
  margin: 58px 0;
  width: 145px;
  height: 60px;
  background-color: #333;
}
.example-octagon:before {
  content: '';
  position: absolute;
  left: 0;
  top: -42px;
  box-sizing: border-box;
  width: 145px;
  border-bottom: 42px solid #333;
  border-left: 42px solid transparent;
  border-right: 42px solid transparent;
}
.example-octagon:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -42px;
  box-sizing: border-box;
  width: 145px;
  border-top: 42px solid #333;
  border-left: 42px solid transparent;
  border-right: 42px solid transparent;
}

.example-star-five {
  position: relative;
  width: 424px;
  height: 166px;
  border-bottom: 166px solid #333;
  border-left: 212px solid transparent;
  border-right: 212px solid transparent;
  transform: rotate(36deg) scale(.5);
}
.example-star-five:before {
  position: absolute;
  content: '';
  top: 0;
  left: -212px;
  border-bottom: 166px solid #333;
  border-left: 212px solid transparent;
  border-right: 212px solid transparent;
  transform: rotate(-72deg);
}
.example-star-five:after {
  position: absolute;
  content: '';
  top: -108px;
  left: -133px;
  border-bottom: 154px solid #333;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  transform: rotate(-36deg);
}
.example-star-six {
  position: relative;
  margin-bottom: 68px;
  width: 180px;
  height: 156px;
  border-bottom: 156px solid #333;
  border-left: 90px solid transparent;
  border-right: 90px solid transparent;
}
.example-star-six:before {
  content: "";
  position: absolute;
  top: 52px;
  left: -90px;
  border-top: 156px solid #333;
  border-left: 90px solid transparent;
  border-right: 90px solid transparent;
}

.example-heart {
  position: relative;
  width: 200px;
  height: 200px;
}
.example-heart:before {
  content: '';
  position: absolute;
  top: 19px;
  left: 0;
  border-radius: 50px 50px 0 0;
  width: 100px;
  height: 162px;
  transform-origin: 100% 100%;
  transform: rotate(45deg);
  background-color: #333;
}
.example-heart:after {
  content: '';
  position: absolute;
  top: 19px;
  right: 0;
  border-radius: 50px 50px 0 0;
  width: 100px;
  height: 162px;
  transform-origin: 0 100%;
  transform: rotate(-45deg);
  background-color: #22d81b;
}

.example-infinity {
  position: relative;
  width: 168px;
  height: 100px;
}
.example-infinity:before {
  content: '';
  position: absolute;
  top: 8px;
  left: 0;
  box-sizing: border-box;
  border: 24px solid #333;
  border-radius: 42px 42px 0 42px;
  width: 84px;
  height: 84px;
  transform: rotate(-45deg);
}
.example-infinity:after {
  content: '';
  position: absolute;
  right: 0;
  top: 8px;
  box-sizing: border-box;
  border: 24px solid #333;
  border-radius: 42px 42px 42px 0;
  width: 84px;
  height: 84px;
  transform: rotate(45deg);
}