<h1>Triangle en CSS</h1>
<div class="showroom">
  <div class="explanation">
    <div class="explanation-txt">
      <p>On crée un carré à partir d'un div ou d'un span.</p>
      <p>On distingue les bordures avec des couleurs différentes.</p>
      <p>On élargit la bordure du carré.<br> (L'épaisseur de la bordure correspondra à la moitié de la longueur de l'hypothénuse).
      </p>
      <p>On réduit les dimensions du carré à 0.</p>
      <p>On choisit le triangle de notre choix avec les couleurs de bordures</p>
      <p>On peut maintenant supprimer la bordure inutile...</p>
      <p>On peut également personnaliser le triangle avec les dimensions des bordures.</p>
      
    </div>
  </div>
  <div class="triangle">
  </div>
  <div class="reload">
    Cliquez pour relancer l'animation
  </div>
$size: 200px;
$size-border: 80px;
$color1: #77ba99;
$color2: #d7c0d0;
$colorend: #d33f49;
$colorendhidden: #eee;
$colorback: #eff0d1;

$animation-duration-1: 17s;
$animation-duration-2: 9s;

@import url("https://fonts.googleapis.com/css?family=Roboto");

html,
body {
  height: calc(100% - 3.5rem);
  font-size: 18px;
  font-family: "Roboto", sans-serif;
  background-color: $colorback;
}
h1 {
  height: 2rem;
  text-align: center;
  color: $colorend ;
}
.showroom {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.triangle {
  width: $size;
  height: $size;
  margin: auto;
  border: 1px solid #f00;
  animation-name: triangle, triangle2;
  animation-delay: 0s, $animation-duration-1;
  animation-duration: $animation-duration-1, $animation-duration-2;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  border-color: $color1 $color2;
}
@keyframes triangle {
  0% {
    border-width: 0px;
    border-color: $color1;
  }
  2%,
  10% {
    border-width: 3px;
    border-color: $color1;
  }
  11%,
  20% {
    border-width: 3px;
    border-color: $color1 $color2;
  }
  40%,
  50% {
    width: $size;
    height: $size;
    border-width: 80px;
  }
  70%,
  75% {
    border-color: $color1 $color2;
    border-width: $size-border;
    width: 0px;
    height: 0px;
  }
  80%,
  85% {
    border-color: $colorendhidden $colorendhidden $colorend $colorendhidden;
  }
  89% {
    border-color: $colorendhidden $colorendhidden $colorendhidden $colorend;
  }
  93% {
    border-color: $colorend $colorendhidden $colorendhidden $colorendhidden;
  }
  96% {
    border-color: $colorendhidden $colorend $colorendhidden $colorendhidden;
  }
  100% {
    border-width: $size-border;
    width: 0px;
    height: 0px;
    border-color: $colorendhidden $colorendhidden $colorend $colorendhidden;
  }
}
@keyframes triangle2 {
  0% {
    border-width: $size-border;
  }
  10%,
  20% {
    border-width: 0 $size-border $size-border $size-border;
  }
  30%,
  40% {
    border-width: 0 0 $size-border $size-border;
  }
  50%,
  60% {
    border-width: 0 $size-border $size-border $size-border;
  }
  70%,
  80% {
    border-width: 0 $size-border $size-border 0;
  }
  90% {
    border-color: $colorendhidden $colorendhidden $colorend $colorendhidden;
    border-width: 0 $size-border $size-border $size-border;
  }
  100% {
    border-width: 0 $size-border $size-border $size-border;
    border-color: transparent transparent $colorend transparent;
  }
}

/* Texte d'explication */
$height: 80px;

.explanation {
  margin: 20px 10px;
  height: 80px;
  overflow: hidden;

  p {
    margin: 0;
    line-height: 20px;
    height: $height;
    counter-increment: step;
  }
  p::before {
    content: counter(step)". ";
    color: $colorend ;
    font-weight: bold;
  }
  .explanation-txt {
    animation-name: texte, texte2;
    animation-delay: 0s, $animation-duration-1;
    animation-duration: $animation-duration-1, $animation-duration-2;
    animation-timing-function: linear;
    animation-fill-mode: forwards;

    position: relative;
    top: 0;
  }
}
@keyframes texte {
  0%,
  10% {
    top: -(0 * $height);
  }
  10.00001%,
  20% {
    top: -(1 * $height);
  }
  20.00001%,
  50% {
    top: -(2 * $height);
  }
  50.00001%,
  75% {
    top: -(3 * $height);
  }
  75.00001%,
  100% {
    top: -(4 * $height);
  }
}

@keyframes texte2 {
  0%,
  10% {
    top: -(5 * $height);
  }
  10.00001%,
  30% {
    top: -(5 * $height);
  }
  30.00001%,
  90% {
    top: -(6 * $height);
  }
  90.00001%,
  100% {
    top: -(7 * $height);
  }
}

/* Indication rechargement */
.reload {
  position: fixed;
  bottom: 10px;
  width: 100%;
  left: 0px;
  text-align: center;
}
View Compiled
/* UNIQUEMENT POUR RELANCER L'ANIM EN CLIQUANT  */
$(document).ready(function() {
  $(".showroom").click(function() {
    newone = $(this).html();
    $(this).html(newone);
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js