Css Shapes

Css Shapes.markdown

Css Shapes

Css shapes

A Pen by Kekeli on CodePen.

License.

index.html

<div class="wrapper">
  <h1> CSS Shapes </h1>
  <h3>Circle</h3>
  <div class="circle"></div>
  <h3>Square</h3>

  <div class="square"></div>
  <h3>Upward Triangle</h3>
  <div class="triangle-two"></div>
  <h3> Downward Triangle</h3>

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

  <h3>Pie</h3>
  <div class="pie"></div>


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

style.css

$light-blue: #4A90E2;
$red: #DE4C2F;
$green: #6BE092;

body{
    font: normal 15px/1.5 'Open Sans', sans-serif;
    margin: 0;
    padding: 0;
     -webkit-font-smoothing: antialiased;
        -ms-word-wrap: break-word;
        word-wrap: break-word;
    color: #4C4C4C;
    background: #FFFFFF;
}
h1{
    color: $light-blue;
}
.wrapper{
  width: 500px;
  margin: 0 auto;
}
.circle,
.square {
  width: 100px;
  height: 100px;
}

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

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

.triangle {
  width: 0;
  height: 0;
  margin-top: 50px;
  border: 70px solid transparent;
  border-top: 70px solid black;
}

.triangle-two {
  width: 0;
  height: 0;
  border: 70px solid transparent;
  border-bottom: 70px solid #6c6cc3;
}

.pie {
  width: 0;
  height: 0;
  background: #C9D267;
  border: 80px solid transparent;
  border-top: 80px solid #382F2F;
  border-right: 80px solid #98491E;
  border-radius: 50%;
}

.star {
  width: 0;
  height: 0;
  border: 80px solid transparent;
  border-bottom: 80px solid #8576c2;
  position: relative;
}

.star:after {
  content: ' ';
  width: 0;
  height: 0;
  border: 80px solid transparent;
  border-top: 80px solid #8576c2;
  display: block;
  position: absolute;
  top: 26px;
  right: -76px;
}

.star-three:before {
  content: '';
  width: 132px;
  display: inline-block;
  height: 0;
  border: 80px solid transparent;
  border-left: 80px solid #269A49;
}