Triangle_CSS_Gradient

by caiubyfreitas

HTML

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

CSS

.gradient { /* Our base */
  width:200px;
  height:200px;
  background: linear-gradient(to bottom, #7d7e7d 0%,#0e0e0e 100%);
  margin:0 auto;
  margin-top:50px;
}

.triangle {
  background:transparent;
  /* comment to see rectangle */ overflow: hidden; /**/
  margin: 0 auto;
  /* uncomment to see rhombus * outline: solid 1px red; /**/
  width: 8.66em; /* height*sqrt(3)/2 */ height: 10em;
  transform: rotate(-90deg) skewY(30deg);
}
.triangle:before, .octagon:before, .octagon.border:after {
  display: block; /* to be able to apply width/ height/ transform */
  width: inherit; height: inherit;
  transform: skewY(-30deg) rotate(60deg) translate(50%);
  background: linear-gradient(to bottom, #7d7e7d 0%,#0e0e0e 100%);
  background-size: cover;
  content: '';
}
.triangle { transform:translateX(-50px) rotate(300deg) skewY(30deg); }