<h1>如何绘制CSS三角形</h1>
<div id="whole-thing">
  <div class="steps">
    <div class="step-0">这是一个盒子</div>
    <div class="step-1">它有一个顶部边框(border-top)</div>
    <div class="step-2">当然它也有其它的边框</div>
    <div class="step-5">注意各边框之间是以怎样的角度连接的</div>
    <div class="step-6">盒子的背景色为透明</div>
    <div class="step-7">盒子的高度和宽度都是0</div>
    <div class="step-8">其中的三条边框都以透明为底色</div>
    <div class="step-11">于是我们就得到了一个CSS三角形</div>
  </div>
  <div class="triangle-demo"></div>
  <div class="triangle-title">
    <button id="re-run">再看一遍</button>
  </div>
</div>
.triangle-demo {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  background: tan;
  border-top: 0 solid #EE7C31;
  border-left: 0 solid #F5D97B;
  border-bottom: 0 solid #D94948;
  border-right: 0 solid #8DB434;
  transition: 0.8s 0.2s;
}
.step-1 .triangle-demo {
  border-top-width: 10px;
}
.step-2 .triangle-demo {
  border-left-width: 10px;
}
.step-3 .triangle-demo {
  border-right-width: 10px;
}
.step-4 .triangle-demo {
  border-bottom-width: 10px;
}
.step-6 .triangle-demo {
  background: transparent;
}
.step-7 .triangle-demo {
  width: 0;
  height: 0;
}
.step-8 .triangle-demo {
  border-left-color: transparent;
}
.step-9 .triangle-demo {
  border-right-color: transparent;
}
.step-10 .triangle-demo {
  border-top-color: transparent;
}

.triangle-title {
  width: 300px;
  padding: 1rem;
  color: white;
  background: #D94948;
  border-radius: 20px;
  margin: auto;
  opacity: 0;
  transition: 0.8s 0.2s;
}
.step-11 .triangle-title {
  opacity: 1;
}

body {
  background: #333;
  color: white;
  text-align: center;
  font-size: large;
  transform: translateZ(0);
}

.steps {
  position: relative;
  height: 45px;
}
.steps > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  background: #333;
  transition: 0.3s;
}
.steps .step-0 {
  opacity: 1;
}
.step-1 .steps .step-1 {
  opacity: 1;
}
.step-2 .steps .step-2 {
  opacity: 1;
}
.step-5 .steps .step-5 {
  opacity: 1;
}
.step-6 .steps .step-6 {
  opacity: 1;
}
.step-7 .steps .step-7 {
  opacity: 1;
}
.step-8 .steps .step-8 {
  opacity: 1;
}
.step-11 .steps .step-11 {
  opacity: 1;
}

h1 {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 1.5rem;
  border-bottom: 1px solid #555;
  color: #999;
}
(function () {
    var demo, run;
    demo = $('#whole-thing');
    run = function () {
        setTimeout(function () {
            return demo.addClass('step-1');
        }, 2500);
        setTimeout(function () {
            return demo.addClass('step-2');
        }, 5000);
        setTimeout(function () {
            return demo.addClass('step-3');
        }, 5500);
        setTimeout(function () {
            return demo.addClass('step-4');
        }, 6000);
        setTimeout(function () {
            return demo.addClass('step-5');
        }, 7500);
        setTimeout(function () {
            return demo.addClass('step-6');
        }, 10000);
        setTimeout(function () {
            return demo.addClass('step-7');
        }, 12000);
        setTimeout(function () {
            return demo.addClass('step-8');
        }, 14000);
        setTimeout(function () {
            return demo.addClass('step-9');
        }, 14500);
        setTimeout(function () {
            return demo.addClass('step-10');
        }, 15000);
        return setTimeout(function () {
            return demo.addClass('step-11');
        }, 18000);
    };
    run();
    $('#re-run').on('click', function () {
        $('#whole-thing').removeClass();
        return run();
    });
}.call(this));

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js