How do CSS triangles work?
在CSS技巧中有很多不同的CSS形状-CSS的形状，我特别困惑于一个三角形：
1 2 3 4 5 6 7 | #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } |
1 |
它如何工作，为什么工作？
CSS三角形：五幕悲剧
正如亚历克斯所说，等宽的边缘以45度角互相对峙：
如果没有上边框，则如下所示：
然后你给它0的宽度…
…高度为0…
…最后，使两侧边界透明：
结果是一个三角形。
边框在相交处使用有角度的边(45°角，边框宽度相等，但更改边框宽度会使角度倾斜)。
杰西德。
通过隐藏某些边界，您可以获得三角形效果(如上所示，通过使不同部分的颜色不同)。
从一个基本的正方形和边框开始。每个边框将被赋予不同的颜色，以便我们区分它们：
1 2 3 4 5 6 7 | .triangle { border-color: yellow blue red green; border-style: solid; border-width: 200px 200px 200px 200px; height: 0px; width: 0px; } |
这给了你：
但不需要顶部边界，所以将其宽度设置为
1 2 3 4 5 6 7 | .triangle { border-color: yellow blue red green; border-style: solid; border-width: 0px 200px 200px 200px; height: 0px; width: 0px; } |
我们会得到：
然后，要隐藏两个三角形，请将边框颜色设置为透明。由于上边框已被有效删除，因此我们也可以将边框顶部颜色设置为透明。
1 2 3 4 5 6 7 | .triangle { border-color: transparent transparent red transparent; border-style: solid; border-width: 0px 200px 200px 200px; height: 0px; width: 0px; } |
最后我们得到：
不同的方法：
带变换旋转的CSS3三角形使用这种技术很容易做成三角形。对于喜欢看动画来解释这种技术在这里的工作原理的人来说：
- 链接到动画：如何制作CSS3三角形。
- 和演示：CSS3三角形与转换旋转。
否则，这里将详细解释如何用一个元素制作等腰直角三角形的4个行为(这不是悲剧)。
- 注1：对于非等腰三角形和花哨的东西，您可以看到步骤4。
- 注2：在以下代码片段中，不包括供应商前缀。它们包含在代码笔演示中。
- 注3：以下说明的HTML始终是：
。
第一步：划分
简单点，只需确保
在这个分区中，插入一个伪元素，并给它100%的父元素的宽度和高度。伪元素在下图中具有蓝色背景。
现在，我们有了这个CSS：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .tr { width: 30%; padding-bottom: 21.27%; /* = width / 1.41 */ position: relative; } .tr: before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #0079C6; } |
第二步：让我们旋转
首先，最重要的是：定义变换原点。默认的原点在伪元素的中心，我们需要它在左下角。通过将此CSS添加到伪元素中：
现在我们可以用
现在，我们有了这个CSS：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | .tr { width: 30%; padding-bottom: 21.27%; /* = width / 1.41 */ position: relative; } .tr:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #0079C6; transform-origin: 0 100%; transform: rotate(45deg); } |
第三步：隐藏
要隐藏伪元素中不需要的部分(用黄色边框溢出DIV的所有内容)，只需在容器上设置
演示
CSS：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | .tr { width: 30%; padding-bottom: 21.27%; /* = width / 1.41 */ position: relative; overflow: hidden; } .tr:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #0079C6; transform-origin: 0 100%; transform: rotate(45deg); } |
第四步：继续……
如演示所示，您可以自定义三角形：
为什么要使用这种技术？
为什么不使用这种技术？
下面是我为演示而创建的jsFiddle中的动画。
另请参见下面的代码片段。
这是一个动画GIF，由屏幕广播制作
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | transforms = [ {'border-left-width' :'30', 'margin-left': '70'}, {'border-bottom-width' :'80'}, {'border-right-width' :'30'}, {'border-top-width' :'0', 'margin-top': '70'}, {'width' :'0'}, {'height' :'0', 'margin-top': '120'}, {'borderLeftColor' :'transparent'}, {'borderRightColor' :'transparent'} ]; $('#a').click(function() {$('.border').trigger("click");}); (function($) { var duration = 1000 $('.border').click(function() { for ( var i=0; i < transforms.length; i++ ) { $(this) .animate(transforms[i], duration) } }).end() }(jQuery)) |
1 2 3 4 5 6 7 8 9 10 11 12 | .border { margin: 20px 50px; width: 50px; height: 50px; border-width: 50px; border-style: solid; border-top-color: green; border-right-color: yellow; border-bottom-color: red; border-left-color: blue; cursor: pointer } |
1 2 3 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> <script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"> Click it! |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | /** * Randomize array element order in-place. * Using Durstenfeld shuffle algorithm. */ function shuffleArray(array) { for (var i = array.length - 1; i > 0; i--) { var j = Math.floor(Math.random() * (i + 1)); var temp = array[i]; array[i] = array[j]; array[j] = temp; } return array; } transforms = [ {'border-left-width' :'30', 'margin-left': '70'}, {'border-bottom-width' :'80'}, {'border-right-width' :'30'}, {'border-top-width' :'0', 'margin-top': '70'}, {'width' :'0'}, {'height' :'0'}, {'borderLeftColor' :'transparent'}, {'borderRightColor' :'transparent'} ]; transforms = shuffleArray(transforms) $('#a').click(function() {$('.border').trigger("click");}); (function($) { var duration = 1000 $('.border').click(function() { for ( var i=0; i < transforms.length; i++ ) { $(this) .animate(transforms[i], duration) } }).end() }(jQuery)) |
1 2 3 4 5 6 7 8 9 10 11 12 | .border { margin: 50px; width: 50px; height: 50px; border-width: 50px; border-style: solid; border-top-color: green; border-right-color: yellow; border-bottom-color: red; border-left-color: blue; cursor: pointer } |
1 2 3 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> <script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"> Click it! |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | $('#a').click(function() {$('.border').trigger("click");}); (function($) { var duration = 1000 $('.border').click(function() { $(this) .animate({'border-top-width': 0 , 'border-left-width': 30 , 'border-right-width': 30 , 'border-bottom-width': 80 , 'width': 0 , 'height': 0 , 'margin-left': 100, 'margin-top': 150, 'borderTopColor': 'transparent', 'borderRightColor': 'transparent', 'borderLeftColor': 'transparent'}, duration) }).end() }(jQuery)) |
1 2 3 4 5 6 7 8 9 10 11 12 | .border { margin: 50px; width: 50px; height: 50px; border-width: 50px; border-style: solid; border-top-color: green; border-right-color: yellow; border-bottom-color: red; border-left-color: blue; cursor: pointer } |
1 2 3 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> <script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"> Click it! |
假设我们有以下分区：
1 |
现在，一步一步地编辑CSS，这样您就可以清楚地知道周围发生了什么。
步骤1：JSfiddle Link：
1 2 3 4 5 6 7 8 9 | #triangle { background: purple; width :150px; height:150PX; border-left: 50px solid black ; border-right: 50px solid black; border-bottom: 50px solid black; border-top: 50px solid black; } |
这是一个简单的分区，有一个非常简单的CSS。所以外行可以理解。DIV的尺寸为150 x 150像素，边框为50像素。图像附加：
步骤2:jsFiddle链接：
1 2 3 4 5 6 7 8 9 | #triangle { background: purple; width :150px; height:150PX; border-left: 50px solid yellow ; border-right: 50px solid green; border-bottom: 50px solid red; border-top: 50px solid blue; } |
现在我改变了四个边的边框颜色。图像已附加。
步骤：3 jsFiddle链接：
1 2 3 4 5 6 7 8 9 | #triangle { background: purple; width :0; height:0; border-left: 50px solid yellow ; border-right: 50px solid green; border-bottom: 50px solid red; border-top: 50px solid blue; } |
现在，我刚刚将DIV的高度和宽度从150像素更改为零。图像已附加
步骤4:J小提琴：
1 2 3 4 5 6 7 8 9 | #triangle { background: purple; width :0px; height:0px; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 50px solid red; border-top: 50px solid transparent; } |
现在，除了底部边框，所有边框都是透明的。图片附在下面。
步骤5:jsFiddle链接：
1 2 3 4 5 6 7 8 9 | #triangle { background: white; width :0px; height:0px; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 50px solid red; border-top: 50px solid transparent; } |
现在我把背景色改成了白色。图像已附加。
因此我们得到了我们需要的三角形。
现在完全不同了…
不要忘记像HTML实体这样简单的解决方案，而不是使用CSS技巧：
1 | ▲ |
结果：
和9650；
请参见：上下三角形的HTML实体是什么？
考虑下面的三角形
1 2 3 4 5 6 7 | .triangle { border-bottom:15px solid #000; border-left:10px solid transparent; border-right:10px solid transparent; width:0; height:0; } |
这就是我们得到的：
为什么会出现这种形状？下图说明了尺寸，注意底部边框使用15px，左侧和右侧使用10px。
通过移除右边界，很容易形成直角三角形。
更进一步，使用基于此的CSS，我在我的背部和下一个按钮上添加了箭头(是的，我知道它不是100%跨浏览器，但仍然很光滑)。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | .triangle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; margin:20px auto; } .triangle-down { border-bottom:none; border-top: 100px solid red; } .triangle-left { border-left:none; border-right: 100px solid red; border-bottom: 50px solid transparent; border-top: 50px solid transparent; } .triangle-right { border-right:none; border-left: 100px solid red; border-bottom: 50px solid transparent; border-top: 50px solid transparent; } .triangle-after:after { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid red; margin:0 5px; content:""; display:inline-block; } .triangle-after-right:after { border-right:none; border-left: 5px solid blue; border-bottom: 5px solid transparent; border-top: 5px solid transparent; } .triangle-before:before { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid blue; margin:0 5px; content:""; display:inline-block; } .triangle-before-left:before { border-left:none; border-right: 5px solid blue; border-bottom: 5px solid transparent; border-top: 5px solid transparent; } |
1 2 | Back Next |
不同的方法。具有线性梯度(对于IE，仅IE 10+)。您可以使用任何角度：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | .triangle { margin: 50px auto; width: 100px; height: 100px; /* linear gradient */ background: -moz-linear-gradient(-45deg, rgba(255,0,0,0) 0%, rgba(255,0,0,0) 50%, rgba(255,0,0,1) 50%, rgba(255,0,0,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,0,0,0)), color-stop(50%,rgba(255,0,0,0)), color-stop(50%,rgba(255,0,0,1)), color-stop(100%,rgba(255,0,0,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(-45deg, rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-45deg, rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(-45deg, rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%); /* IE10+ */ background: linear-gradient(135deg, rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%); /* W3C */; } |
1 |
这是J小提琴
好的，这个三角形将被创建，因为元素的边框在HTML和CSS中协同工作的方式…
正如我们通常使用1或2px的边框一样，我们从来没有注意到边框以相同的宽度彼此形成45°的角度，如果宽度发生变化，角度也会发生变化，请运行我在下面创建的CSS代码：
1 2 3 4 5 6 7 | .triangle { width: 100px; height: 100px; border-left: 50px solid black; border-right: 50px solid black; border-bottom: 100px solid red; } |
1 |
在下一步中，我们没有任何宽度或高度，如下所示：
1 2 3 4 5 6 7 | .triangle { width: 0; height: 0; border-left: 50px solid black; border-right: 50px solid black; border-bottom: 100px solid red; } |
1 |
现在，我们使左右边界隐形，使我们想要的三角形如下：
1 2 3 4 5 6 7 | .triangle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } |
1 |
如果您不想运行代码片段来查看步骤，我创建了一个图像序列来查看一个图像中的所有步骤：
这是一个古老的问题，但我认为值得分享如何使用三角形技术创建箭头。
步骤1：让我们创建2个三角形，对于第二个三角形，我们将使用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | .arrow{ width: 0; height: 0; border-radius: 50px; display: inline-block; position: relative; } .arrow:after{ content:""; width: 0; height: 0; position: absolute; } .arrow-up{ border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 50px solid #333; } .arrow-up:after{ top: 5px; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 50px solid #ccc; right: -50px; } |
1 |
现在我们只需将第二个三角形的主要边框颜色设置为背景的相同颜色：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | .arrow{ width: 0; height: 0; border-radius: 50px; display: inline-block; position: relative; } .arrow:after{ content:""; width: 0; height: 0; position: absolute; } .arrow-up{ border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 50px solid #333; } .arrow-up:after{ top: 5px; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 50px solid #fff; right: -50px; } |
1 |
摆弄所有的箭头：http://jsfiddle.net/tomsarduy/r0zksgeu/
css
这是我觉得这个问题遗漏了的东西；
clip-path in a nutshellClipping, with the
clip-path property, is akin to cutting a shape (like a circle or a pentagon) from a rectangular piece of paper. The property belongs to the"CSS Masking Module Level 1" specification. The spec states,"CSS masking provides two means for partially or fully hiding portions of visual elements: masking and clipping".
- Extract from Smashing Magazine
1 2 3 4 5 6 7 | div { -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%); clip-path: polygon(50% 0%, 0% 100%, 100% 100%); background: red; width: 100px; height: 100px; } |
1 |
目前它确实有一个很大的缺点，一个是它主要缺乏支持，只在
以下是一些有用的资源和材料，有助于更好地理解
- clippy-a-
clip-path 发电机 - W3C候选推荐文件
- MDN
clip-path 文件 clip-path 浏览器支持
SASS(SCSS)三角形混合
我写这篇文章是为了让自动生成一个CSS三角形更容易(也更容易干燥)：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | // Triangle helper mixin (by Yair Even-Or) // @param {Direction} $direction - either `top`, `right`, `bottom` or `left` // @param {Color} $color [currentcolor] - Triangle color // @param {Length} $size [1em] - Triangle size @mixin triangle($direction, $color: currentcolor, $size: 1em) { $size: $size/2; $transparent: rgba($color, 0); $opposite: (top:bottom, right:left, left:right, bottom:top); content: ''; display: inline-block; width: 0; height: 0; border: $size solid $transparent; border-#{map-get($opposite, $direction)}-color: $color; margin-#{$direction}: -$size; } |
用例示例：
1 2 3 | span { @include triangle(bottom, red, 10px); } |
游乐场页面
重要提示：如果三角形在某些浏览器中看起来像像素化的，请尝试下面描述的方法之一。
几乎所有的答案都集中在使用边界构建的三角形上，所以我将详细介绍
使用像
1 2 3 4 5 6 7 8 | .tri { width:100px; height:100px; background:linear-gradient(45deg, transparent 50%,red 0); /*To illustrate*/ border:1px solid; } |
1 2 3 4 5 | Good one bad one bad one |
不要这样做，我们应该考虑像
1)矩形三角形
要得到这样的三角形，我们需要一个线性梯度和一个对角线方向，如
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | .tri-1,.tri-2 { display:inline-block; width:100px; height:100px; background:linear-gradient(to bottom left, transparent 49.8%,red 50%); border:1px solid; animation:change 2s linear infinite alternate; } .tri-2 { background:linear-gradient(to top right, transparent 49.8%,red 50%); border:none; } @keyframes change { from { width:100px; height:100px; } to { height:50px; width:180px; } } |
1 |
2)等腰三角形
对于这一个，我们需要2个线性梯度，就像上面一样，每个梯度取一半的宽度(或高度)。就像我们创建了第一个三角形的镜像。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | .tri { display:inline-block; width:100px; height:100px; background-image: linear-gradient(to bottom right, transparent 49.8%,red 50%), linear-gradient(to bottom left, transparent 49.8%,red 50%); background-size:50.5% 100%; /* I use a value slightly bigger than 50% to avoid having a small gap between both gradient*/ background-position:left,right; background-repeat:no-repeat; animation:change 2s linear infinite alternate; } @keyframes change { from { width:100px; height:100px; } to { height:50px; width:180px; } } |
1 |
3)等边三角形
这个有点难处理，因为我们需要保持梯度的高度和宽度之间的关系。我们将有与上面相同的三角形，但是我们将使计算更复杂，以便将等腰三角形转换为等边三角形。
为了方便起见，我们将考虑到我们的分区的宽度是已知的，高度足够大，能够画出我们内部的三角形(
我们有两个梯度
我们可以依靠
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .tri { --w:100px; width:var(--w); height:100px; display:inline-block; background-image: linear-gradient(to bottom right, transparent 49.8%,red 50%), linear-gradient(to bottom left, transparent 49.8%,red 50%); background-size:calc(var(--w)/2 + 0.5%) calc(0.866 * var(--w)); background-position: left bottom,right bottom; background-repeat:no-repeat; } |
1 |
另一种方法是控制DIV的高度并保持渐变的语法简单：
1 2 3 4 5 6 7 8 9 10 11 12 | .tri { --w:100px; width:var(--w); height:calc(0.866 * var(--w)); display:inline-block; background: linear-gradient(to bottom right, transparent 49.8%,red 50%) left, linear-gradient(to bottom left, transparent 49.8%,red 50%) right; background-size:50.2% 100%; background-repeat:no-repeat; } |
1 |
4)随机三角形
要得到一个随机三角形，很容易，因为我们只需要去掉每个三角形50%的条件，但是我们应该保持两个条件(两个条件都应该有相同的高度，两个条件的和应该是100%)。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .tri-1 { width:100px; height:100px; display:inline-block; background-image: linear-gradient(to bottom right, transparent 50%,red 0), linear-gradient(to bottom left, transparent 50%,red 0); background-size:20% 60%,80% 60%; background-position: left bottom,right bottom; background-repeat:no-repeat; } |
1 |
但是如果我们想为每一方定义一个值呢？我们只需要再计算一次！
让我们把
1 2 3 | wg2 = (a2+c2-b2)/(2a) wg1 = a - wg2 hg1 = hg2 = sqrt(b2 - wg12) = sqrt(c2 - wg22) |
现在我们已经达到了CSS的极限，即使使用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | .tri { --wg1: 20px; --wg2: 60px; --hg:30px; width:calc(var(--wg1) + var(--wg2)); height:100px; display:inline-block; background-image: linear-gradient(to bottom right, transparent 50%,red 0), linear-gradient(to bottom left, transparent 50%,red 0); background-size:var(--wg1) var(--hg),var(--wg2) var(--hg); background-position: left bottom,right bottom; background-repeat:no-repeat; } |
1 |
奖金
我们不应该忘记，我们也可以应用旋转和/或倾斜，我们有更多的选择来获得更多的三角形：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | .tri { --wg1: 20px; --wg2: 60px; --hg:30px; width:calc(var(--wg1) + var(--wg2)); height:100px; display:inline-block; background-image: linear-gradient(to bottom right, transparent 50%,red 0), linear-gradient(to bottom left, transparent 50%,red 0); background-size:var(--wg1) var(--hg),var(--wg2) var(--hg); background-position: left bottom,right bottom; background-repeat:no-repeat; } |
1 |
当然，我们应该记住在某些情况下更适合的SVG解决方案：
1 2 3 4 5 6 7 8 | svg { width:100px; height:100px; } polygon { fill:red; } |
1 2 3 4 | <svg viewBox="0 0 100 100"><polygon points="0,100 0,0 100,100" /></svg> <svg viewBox="0 0 100 100"><polygon points="0,100 50,0 100,100" /></svg> <svg viewBox="0 0 100 100"><polygon points="0,100 50,23 100,100" /></svg> <svg viewBox="0 0 100 100"><polygon points="20,60 50,43 80,100" /></svg> |
这是另一把小提琴：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | .container:after { position: absolute; right: 0; content:""; margin-right:-50px; margin-bottom: -8px; border-width: 25px; border-style: solid; border-color: transparent transparent transparent #000; width: 0; height: 0; z-index: 10; -webkit-transition: visibility 50ms ease-in-out,opacity 50ms ease-in-out; transition: visibility 50ms ease-in-out,opacity 50ms ease-in-out; bottom: 21px; } .container { float: left; margin-top: 100px; position: relative; width: 150px; height: 80px; background-color: #000; } .containerRed { float: left; margin-top: 100px; position: relative; width: 100px; height: 80px; background-color: red; } |
https://jsfiddle.net/qdhvdb17/
其他人已经很好地解释了这一点。让我给你一个动画，可以很快解释这一点：http://codepen.io/chriscoyier/pen/lotjh
下面是一些代码，供您使用和学习这些概念。
HTML：
1 2 3 4 5 6 | <html> <body> </body> </html> |
CSS：
1 2 3 4 5 6 7 8 9 | /*border-width is border thickness*/ #border-demo { background: gray; border-color: yellow blue red green;/*top right bottom left*/ border-style: solid; border-width: 25px 25px 25px 25px;/*top right bottom left*/ height: 50px; width: 50px; } |
玩这个看看会发生什么。将高度和宽度设置为零。然后移除上边框，使左右两边透明，或者只需查看下面的代码，就可以生成一个CSS三角形：
1 2 3 4 5 | #border-demo { border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid blue; } |