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

时间: 2013-12-5 分类: CSS 作者: SAI

TAGS:

传统的网站或者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>
    <div>Imagine a box(假设这里有一个盒模型)</div>
    <div>The box has a border-top(这个盒模型拥有一个上边框)</div>
    <div>It also has the other borders(当然,同时包含其它边框)</div>
    <div>Notice how the borders meet each other at angles.(注意一下边框连接处的角度)</div>
    <div>The background of the box is transparent.(盒模型的背景是透明的)</div>
    <div>The box is actually zero width and zero height.(盒模型的宽度和高度设置为0)</div>
    <div>Three of the borders are actually transparent in color.(其它3个边框颜色透明)</div>
    <div>That’s how a CSS triangle is made!(看到了一个CSS的三角形如何生成了吧!)</div>
  </div>
  <div></div>
  <div>
    <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;
}
Javin

本文作者: SAI

推崇以用户为中心的设计理念,专注于用户体验设计,游走在视觉设计与前端开发之间。我要投稿

除非特殊注明,本文版权归原作者所有,欢迎转载!转载请注明版权以及本文地址,谢谢。
转载保留版权:塞纳» 前端技术 » CSS » 如何使用CSS生成一个三角形?
本文地址:http://www.saiody.com/?p=920

返回顶部