文章源自:http://www.gbtags.com/gb/share/2094.htm
如何生成一个CSS的三角形
直接运行代码，查看制作效果。
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>小三角</title>
<style type="text/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;
}
</style>
</head>
<script src="js/jquery-1.8.2.js"></script>
<body>
<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>
</body>
<script type="text/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);
</script>
</html>
相关推荐
通过将一个元素的三个边框设置为透明，然后调整另一个边框的宽度和颜色，可以创造出一个看起来像三角形的效果。例如，如果一个元素的宽度和高度都为0，但一个边框宽度被设置为非零值，那么这个元素就会显示为一个...
在本文中，我们将深入探讨如何使用纯CSS技术创建一个多彩三角形有序变化的特效动画背景墙，这是一种在现代网页设计中常用来增加视觉吸引力的方法。这个主题涉及到CSS3的多个重要特性，包括选择器、边框、渐变、动画...
CSS三角形的生成主要依赖于边框（border）属性。由于边框可以独立设置宽度和颜色，当某些边框被隐藏或设置为透明时，我们可以通过控制剩余边框的宽度和颜色来创造出三角形的效果。关键在于理解边框实际上是三角形的...
在CSS世界中，创造出各种形状是一项基本技能，而“用CSS写出三角形”是一个常见的需求，尤其是在构建下拉菜单、提示框或者箭头效果时。本文将深入探讨如何利用CSS来绘制三角形，并通过实际的代码示例进行解析。 ...
在描述中提到的"三角形菜单"，是利用CSS3的一个特性来创建的。在CSS3中，可以通过伪元素（`:before`或`:after`）和`border`属性来生成三角形。通过设置元素的`border-left`, `border-right`, `border-top`或`border-...
手写笔三角形发生器使用 Stylus 生成 CSS 三角形的小混合。用法 triangle(width, height, direction, color) .make-me-a-triangle-babytriangle(10px, 10px, 'bottom', #000)新产品经理 npm install stylus-triangle...
总结来说，这个资源包提供了一个结合了CSS3三角形技巧和Bootstrap框架的设计师案例，可以帮助开发者学习如何创建独特的三角形设计，并将它们融入到响应式网页模板中。通过这个案例，开发者不仅可以掌握CSS3的三角形...
"triangle-generator"是一个工具，它允许开发者通过JavaScript生成自定义的CSS代码，以创建所需的三角形。 CSS三角形的生成原理基于CSS边框。由于边框是直角形状，当我们只对一个或两个边框设置宽度，并将其他边框...
【标题解析】：“个性css3三角形设计师案例bootstrap模板”这个标题揭示了我们要探讨的核心内容。这是一款基于CSS3技术，特别关注三角形图形设计的前端网页模板，它结合了Bootstrap框架，为网页设计师提供了富有创意...
这种方法的核心思想是，当一个元素的宽和高被设置为0时，四个边框会聚拢在一个点上，形成一个等腰三角形。通过调整每个边框的颜色，我们可以使其中的三个边框透明或隐藏，仅显示需要的一个边框形成三角形。具体来说...
1. **CSS3 Generator**：这个在线工具允许用户快速生成CSS3属性，如渐变、阴影、边框半径等，大大简化了代码编写过程。只需调整参数，即可自动生成相应的CSS3代码。 2. **Animate.css**：Animate.css是一个预设的...
本文将深入探讨一个基于CSS3、Bootstrap框架的个性化设计师案例模板，该模板以其独特的三角形设计元素、响应式布局以及丰富的动画效果而引人注目。 首先，CSS3是层叠样式表的第三版，它为网页设计师提供了更多高级...
首先，让我们了解基本的CSS三角形制作原理。三角形通常通过设置元素的宽高为0，然后利用非透明边框来形成。由于边框是等宽的，当一个元素的四个边框颜色不同，且至少有一条边的边框颜色可见时，就会形成一个三角形。...
2. **配置对象**：创建一个配置对象，指定如色彩、三角形大小等参数。 3. **生成SVG**：调用Trianglify函数，传入配置对象，得到SVG元素。 4. **插入DOM**：将生成的SVG元素插入到页面的适当位置，如`<body>`或...
该资源是一个基于CSS3和JavaScript实现的交互式动画效果源码，主要展示了如何利用这两种技术构建一个炫彩的、鼠标响应式的三角形叠加结构，从而形成一种类似水晶的视觉效果。接下来，我们将深入探讨其中涉及的关键...
本文将分别从鼠标事件处理、纯CSS三角形制作这两个关键技术点，以及相关的HTML结构来介绍如何创建一个功能完整的气泡提示框。 首先，涉及到的JavaScript技术包括响应鼠标事件。这里主要使用了`mouseover`和`mouse...
三角形是CSS设计中经常用到的一个元素，通常用于箭头或是其他装饰性图形。要创建一个三角形，关键在于利用CSS的边框属性。边框可以被想象成一个矩形，当矩形的宽度逐渐减少至0时，它的边框就会形成一个三角形。默认...
**JSP-MVC三角形计算** 是一个基于JavaServer Pages（JSP）技术，并遵循Model-View-Controller（MVC）设计模式的项目，旨在帮助学习者理解和实践Web应用程序开发中的基本概念。该项目的核心功能是计算三角形的面积和...
总结起来，"彩色三角形图案Canvas特效.zip" 提供了一个结合了Canvas图形绘制、jQuery交互和CSS样式设计的网页特效实例，适用于提升网站的视觉吸引力。开发人员可以通过学习和修改这个资源，进一步掌握前端开发中的...
总的来说，“HTML5 SVG三角形矩阵动画特效”是一个结合了HTML5、SVG和JavaScript技术的示例，展示了如何用这些工具创造出富有创意的网页互动元素。这个特效不仅展示了HTML5的现代功能，也突出了JavaScript在增强用户...