연습장:Sakura/1 문서 원본 보기

<html>
<div id="triangle">
  <div class="top"></div>
  <div class="fill"></div>
  <div class="bottom"></div>
</div>

<style>
#triangle {
  width: 100px;
  height: 100px;
  position: relative;
  overflow: hidden;
}
.top, .fill, .bottom {
  width: 100%;
  height: 0;
  position: absolute;
  transition: height 0.5s ease-out;
}
.top {
  border-style: solid;
  border-width: 0 50px 86.6px 50px;
  border-color: transparent transparent #f00 transparent;
  top: 0;
  left: 0;
}
.fill {
  background-color: #f00;
  top: 50%;
  left: 0;
}
.bottom {
  border-style: solid;
  border-width: 86.6px 50px 0 50px;
  border-color: #f00 transparent transparent transparent;
  bottom: 0;
  left: 0;
}
#triangle.open .top {
  height: 50%;
}
#triangle.open .fill {
  height: 50%;
}
#triangle.open .bottom {
  height: 0;
}
</style>

<script>
var triangle = document.getElementById("triangle");
triangle.addEventListener("click", function() {
  triangle.classList.toggle("open");
});
</script>
</html>