客服:点击这里给我发消息

手机:15193566610 马先生

奈特网络科技,武威网站建设公司

您的位置:当前位置:武威网站-武威奈特网 > 网站建设 > 建站知识 >

如何使用CSS生成一个三角形?

来源:未知   发表时间:2015-11-10 10:12

           传统的网站或者web应用中,如果我们需要创建一个提示的话,通常使用图片来生成小三角,今天这里我们分享一个动画小教程,帮助你快速学习如何使用纯CSS来生成一个三角形。
     
    提示:请使用Firefox或者Chrome查看下面在线调试演示
     
    JavaScript
     
    (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);
     
     
    HTML
     
    <h1>超短小教程:如何生成一个CSS的三角形?</h1>
    <div id="whole-thing">
      <div class="steps">
        <div class="step-0">Imagine a box(假设这里有一个盒模型)</div>
        <div class="step-1">The box has a border-top(这个盒模型拥有一个上边框)</div>
        <div class="step-2">It also has the other borders(当然,同时包含其它边框)</div>
        <div class="step-5">Notice how the borders meet each other at angles.(注意一下边框连接处的角度)</div>
        <div class="step-6">The background of the box is transparent.(盒模型的背景是透明的)</div>
        <div class="step-7">The box is actually zero width and zero height.(盒模型的宽度和高度设置为0)</div>
        <div class="step-8">Three of the borders are actually transparent in color.(其它3个边框颜色透明)</div>
        <div class="step-11">That's how a CSS triangle is made!(看到了一个CSS的三角形如何生成了吧!)</div>
      </div>
      <div class="triangle-demo"></div>
      <div class="triangle-title">
        <button id="re-run">再运行一次</button>
      </div>
    </div>
     
    CSS
     
    @import url(http://fonts.googleapis.com/css?family=Andika);
    .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;
      font-family: 'Andika', sans-serif;
      color: white;
      text-align: center;
      font-size: large;
      transform: translateZ(0);
    }
     
    .steps {
      position: relative;
      height: 45px;
      margin-bottom:20px;
    }
    .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: 14px;
      border-bottom: 1px solid #555;
      color: #999;
      padding-bottom:10px;
      font-family: Arial;
      font-weight: normal;
    }