Shapes and CSS

index.html

<div class="square"></div>
<div class="rectangle"></div>
<div class="circle"></div>
<div class="oval"></div>
<div class="triangle-up"></div>
<div class="triangle-down"></div>
<div class="triangle-left"></div>
<div class="triangle-right"></div>
<div class="triangle-top-left-shape"></div>
<div class="triangle-top-right-shape"></div>
<div class="triangle-bottom-left-shape"></div>
<div class="triangle-bottom-right-shape"></div>

shapes-and-css.markdown

Shapes and CSS

A Pen by Pranava Swaroop on CodePen.

License.

style.css

.square{
  width: 100px;
  height: 100px;
  background-color: green;
}

.rectangle {
  width: 200px;
  height: 100px;
  background-color: cyan;
}

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

.oval{
  width: 200px;
  height: 100px;
  background: lightblue;
  border-radius: 100px/ 50px; 
}

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

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

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

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

.triangle-top-left-shape{
  width: 0px;
  height: 0px;
  border-top: 100px solid blue;
  border-right: 100px solid transparent;
}

.triangle-top-right-shape{
  width: 0px;
  height: 0px;
  border-top: 100px solid blue;
  border-left: 100px solid transparent;
}


.triangle-bottom-left-shape{
  width: 0px;
  height: 0px;
  border-bottom: 100px solid blue;
  border-right: 100px solid transparent;
}

.triangle-bottom-right-shape{
  width: 0px;
  height: 0px;
  border-bottom: 100px solid blue;
  border-left: 100px solid transparent;
}