轩枫阁

首页 / Web前端 / CSS / 利用CSS创建三角形【译】

利用CSS创建三角形【译】

首次翻译,整个译文带有我自己的理解,如果译得不好或不对之处还请同行朋友指点。

英文原文:《Creating Triangles in CSS》

demo地址:http://www.xuanfengge.com/demo/201308/Triangles/

我在我的职业生涯中遇到过一些技术和技巧,在最后一个演出上工作时,一个同事想我指出这种技术。我相信这个是由传奇 Eric Meyer最初发现的,但是我在网上找不到太多关于它的文档。所以我想在这里描绘一下这种技术。

dsg

产生原理

很少有人意识到,当浏览器在绘制边框时,是通过角来绘制。绘制三角形就充分利用了这一点:有一个边框(border)被着色成箭头的颜色,其他的三个边框都设置成透明(transparent)。然后你可以给这些边框设置更大的宽度(border-width),下面的这个图是20px。在这里展示的是一个各个边框都着色的DIV块。

5U8P77{{LGH7AL[JBLBGIOG

 

正如你在方块里看到的三角形,这些三角形的边框尺寸(border-width)进行了小小的调整,这样就可以得到更尖锐的三角形。

FG~CEBS5O~41}~RYFWCBMJ9

再加上一些创造性思维和调整,就可以绘制出更多的形状。

5U8P77{{LGH7AL[JBLBGIOG

5U8P77{{LGH7AL[JBLBGIOG

fgt

OM5Y`H]@8P_}4(9HN@$}G]I

]_(KE`EVRID15R7@GX8@}66

{3K@@$(}S6]WQD6IBR5~L8P

sdfs

现在来看一个应用:

sdf

这个是一个典型的聊天消息泡泡,没有用到任何图片。

html:

css:

这个技巧阿紫IE6下不能如愿的产生效果,主要是因为IE6不支持透明的边框,但是这里有个方案可以修复。你需要做的就是给“transparent”边加上一个其他的颜色比如pink,然后用滤镜:chroma来把这个颜色转换成透明。

 

305/456
307/456

相关文章

文章评论

  • 暂无评论

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]