Heim > Artikel > Web-Frontend > CSS 使用border来创建三角形的基本思路和实例
比较简单实用的还是使用border来创建三角形,今天主要研究这个的实现
将边框分别设置为红/黄/蓝/绿
<code class="language-css">.triangle { height: 0; width: 0; overflow: hidden; font-size: 0; line-height: 0; border-color: #ff0000 #ffff00 #0000ff #008000; border-style: solid; border-width: 40px 40px 40px 40px; } </code>
效果如下:
四个三角形合成一个正方形,大小为80x80,如果我们只想保留其中某个三角形的话,将其它的设置为透明即可,比如(以下css未改变部分与上面相同)
<code class="language-css">.triangle { border-color: #ff0000 transparent transparent transparent; border-width: 40px 40px 40px 40px; } </code>
效果如下:
IE6不支持transparent,所以不会透明而会显示难看的黑色,不过也有解决方法:将透明的部分对应的border-style设为dashed即可
<code class="language-css">.triangle { border-color: #ff0000 transparent transparent transparent; border-style: solid dashed dashed dashed; border-width: 40px 40px 40px 40px; } </code>
正方形按对角线平分为两个三角形的情况
<code class="language-css">.triangle { border-color: #ff0000 #ffff00 #0000ff #008000; border-style: solid; border-width: 0 0 40px 40px; } </code>
<code class="language-css">.triangle { border-color: #ff0000 #ffff00 #0000ff #008000; border-style: solid; border-width: 0 40px 40px 0; } </code>
需要指出的是,此时正方形的大小为40x40
如果将border-width的某一边设为0又会怎么样呢?也算是两种情况
<code class="language-css">.triangle { border-color: #ff0000 #ffff00 #0000ff #008000; border-style: solid; border-width: 40px 40px 0 40px; } </code>
<code class="language-css">.triangle { border-color: #ff0000 #ffff00 #0000ff #008000; border-style: solid; border-width: 40px 40px 40px 0; } </code>
结果是长方形,其中一边为80一边为40。宽度被设为0的边框对应方向的边框会形成较大的三角形,且长度加倍
segmentfault的"采纳"的显示其实也是用三角形实现的
上部分是包含'采纳'两个字的块状元素,设置position: relative。下部分用伪类after设置一个position: absolute的块状元素,将两者接在一起。通过border-width设置成长方形而不是正方形,再将下方的三角形去掉即可,看下面的css十分明显,这也是三角形的一个很好的应用
<code class="language-css">.accepted-flag:after { position: absolute; left: 0; top: 25px; content: ''; border-width: 9px 18px; border-style: solid; border-color: #009a61 #009a61 transparent #009a61; } </code>
在你的HTML文件中有以下的canvas元素:
<code class="language-html"><canvas id="triangle" height="100" width="100">Triangle</canvas> </code>
这里的如何使用JavaScript绘制一个三角形:
<code class="language-javascript">var canvas = document.getElementById('triangle'); var context = canvas.getContext('2d'); context.beginPath(); context.moveTo(0, 0); context.lineTo(100, 0); context.lineTo(50, 100); context.closePath(); context.fillStyle = "rgb(78, 193, 243)"; context.fill(); </code>
这是如何在您的标签,你可以定义一个内联SVG三角形:
<code class="language-html"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-triangle"> <polygon points="0,0 100,0 50,100"></polygon> </svg> </code>
然后,只需添加一些样式:
<code class="language-css">.svg-triangle{ margin: 0 auto; width: 100px; height: 100px; } .svg-triangle polygon { fill:#98d02e; stroke:#65b81d; stroke-width:2; } </code>