CSS Trianagle

by aanita0309

HTML

<!-- Draw triangle -->

<div class="tri">

</div>

CSS

.tri {
  height: 0px;
  width: 100px;
  /*background-color: white;
  border: 100px solid green;*/
  border-top: 100px solid blue;
  border-right: 100px solid green;
  border-bottom: 100px solid yellow;
  border-left: 100px solid transparent;
  outline: 20px solid pink;
  /*An outline is a line that is drawn around elements,                             OUTSIDE the borders, to make the element "stand out".
                                        */
  outline-offset: 15px;
  /* add space between outline & border. it is transparent*/
  margin-left: 50px;
  margin-top: 50px;
}