用scale会有文档流占用空间纷歧致的问题，因为你要画的区域就那么小，详见css-tricks，而border-bottom抉择了右边直角边的长度，就不会有这种问题，上面用的属性都是CSS 2最根基的一些属性，你要改它的巨细，舍去个小数影响较量大，假如我画的三角形原来就较量小，这个要领的缺点是没步伐配置三角形的box-shadow的表面为一个三角形，两个三角形错位2个像素， ，所以假如border-bottom-width是40px，验证一下： 确实画出了一个等边三角形，到这里你大概会有一个疑问：上面取了约等， 3. 画一个有边沿色的三角形 这种三角形很常见，还不如用个图标字体，保持border-left和border-right的巨细稳定。

那么border-left和border-right的宽度都是40px * sqrt(2) / 2 ~= 28px，就酿成了： 再把border-top去掉，然后再画一个同样巨细白色的三角形盖在它上面。

舍掉的小数相对很小，假如要取左边border。

奈何画一个等边三角形，等边三角形的底边的高是底边的1/sqrt(2)倍，就是一个三角形了： 这里是用了底部的border作为三角形，导致它看起来有点错位了。

而且直角在右下角： right 0 right 0 即代码为： CSS 1 2 3 border-left:60pxsolidtransparent; border-right:0solidtransparent; border-bottom:40pxsolid#000; border-right为0，你可以贴一张png，可是太贫苦，因为像素巨细是不能为小数，没有了border-top就把上面的区域给裁掉了： 接下来，第二种是有边框色的三角形，先先容最简朴的纯色三角形。

剩下四个border，还可以画其它许多形状，要么你知道它画的道理，因为border-bottom-width其实就是底边的高： 然后再做第二个尝试，那么奈何画一个等边三角形呢？ 首先，只是不容易想到就是先画一个深色的三角形，让border-bottom不绝变大，比方假如想要直角边在右上角的话，那么它将是一个直角三角形，所以这种较量巨大的css画法，所以没有兼容性问题。

恰好跟直观的想法相反，出格是tip的提示框、谈天动静的框等： 上面实现是用了一个图标字体， 1. 三角形的画法 三角形可以用border画出来， 同时，让border-left不绝地变大。

而底边的高是border-bottom，同时不要右边的border： 斜边在左边的三角形 CSS 1 2 3 border-top:50pxsolidtransparent; border-bottom:50pxsolidtransparent; border-left:50pxsolid#000; 结果如下： 斜边在左边 斜边在顶部 斜边在右边 2. 节制三角形的角度 上面画的三角形是一个直角三角形，像五角形、爱心等等，要想画个绝对等边的三角形自己就有难度， 首先画一个深色的三角形： 画一个深色的三角形 XHTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 style .chat-msg { width:300px; height:80px; border:1pxsolid#ccc; position:relative; } .chat-msg:before{ position:absolute; left:-10px; top:34px; border-top:6pxsolidtransparent; border-bottom:6pxsolidtransparent; border-right:10pxsolid#ccc; } /style div class=chat-msghi，其它两个border保持稳定： left 40px left 50px left 60px left 40px left 50px left 60px 通过上下比拟，假如右边的border-width是0的话，调查下形状是怎么变的： bottom 40px bottom 50px bottom 60px 可以看到顶部的角度在不绝变小， 这种画法其实很简朴，看出border-left变大增加了左边那条边的长度，底边是由border-left加上border-right的长度合起来的，实用性并不是很大，这时候怎么办？其实这个问题自己是无解的，两行代码即可。

约便是28px，可是这种由于借助了transform等属性，三角形其实可以用CSS画出来，要么用scale，可以分为两种三角形，像那种下拉的右边的三角形。

这样深色三角形的边沿就恰好暴露一个像素，而底边的高在不绝地变大。

假如用CSS画，就算用其它的步伐也会有一样的逆境，通过切换四个border的配置就可以节制直角边在差异的位置。

所以用不了box-shadow， 三角形的场景很常见，打开一个页面可以看到各类百般的三角形： 由于div一般是四边形，换句话说三角形底边长稳定，也就是border-right可以和width、height一样不消配置。

首先一个有四个border的div应该是这样的： 然后把它的高度和宽度去掉，可是上面是28个px，错位两个像素 CSS 1 2 3 4 5 6 7 8 .chat-msg:before{ position:absolute; left:-8px; top:34px; border-top:6pxsolidtransparent; border-bottom:6pxsolidtransparent; border-right:10pxsolid#fff; } 结果如下： 到这里就说明完了，可是同于高度没有那么方才好，所以兼容性没有画一个三角形的好，由此可以想到，读者可以自行想象一下，可能是用svg的形式，颠末上面的阐明可以知道。

如上图提到，个中border-left抉择了底部直角边的长度，用得较量多的应该是等边三角形。

可是这种步伐有点low，大白这一点很重要，那应该是配置border-left和border-top，一种是纯色的三角形。

回到上面的问题，再让阁下双方的border透明， 除了画一个三角形之外，跟svg差不多，同理只需让上下两个border颜色为transparent。

而且巨细欠好扩展，亲/div 结果如下： 然后再画一个白色的三角形盖上去，要画个三角形并不是那么直观，然后一个个去改各个组成的属性位置和巨细，。