当然，其他任意方向也是可以的，只需要控制旋转角度rotate即可。原理是构造了一个正方形，隐藏了其中的两条边left和bottom，然后进行旋转。
通过使用正方形左下两条边，并向下向右平移，再旋转，得到一个向下并居中的箭头
你可以做一个带箭头的div；然后样式如下：div
{
/* 箭头的样式，你自己设计，下面是旋转的样式*/
transform:rotate(90deg)
-ms-transform:rotate(90deg)/* Internet Explorer */
-moz-transform:rotate(90deg)/* Firefox */
-webkit-transform:rotate(90deg)/* Safari 和 Chrome */
-o-transform:rotate(90deg)/* Opera */
}
这个是CSS3，所以浏览器并不是都兼容的。上面的deg就是角度单位度。
<meta http-equiv=Content-Type content=text/htmlcharset=gbk/</head<body<div style=padding: 40pxbackground:#fff
<div style=position: relativebackground: redpadding: 20pxcolor: #fffmargin-bottom: 30px<span style=position: absoluteleft: 30pxtop: -32pxwidth: 0height: 0font-size: 0border-width: 16pxborder-style: dashed dashed solid dashedborder-color: transparent transparent red transparent</span 纯CSS实现三角形箭头布局的代码</div
<div style=position: relativeborder: 4px solid redpadding: 20pxmargin-bottom: 30px<span style=position: absoluteleft: 30pxtop: -32pxwidth: 0height: 0font-size: 0border-width: 16pxborder-style: dashed dashed solid dashedborder-color: transparent transparent red transparent</span<span style=position: absoluteleft: 30pxtop: -27pxwidth: 0height: 0font-size: 0border-width: 16pxborder-style: dashed dashed solid dashedborder-color: transparent transparent #FFF transparent</span纯CSS实现三角形箭头布局的代码</div
<div style=position: relativebackground: redpadding: 20pxcolor: #fffmargin-bottom: 30px<span style=position: absoluteleft: 30pxtop: -16pxwidth: 0height: 0font-size: 0border-width: 16pxborder-style: dashed dashed dashed solidborder-color: transparent transparent transparent red</span纯CSS实现三角形箭头布局的代码</div
<div style=position: relativebackground: redpadding: 20pxcolor: #fffmargin-bottom: 30px<span style=position: absoluteleft: 30pxtop: -16pxwidth: 0height: 0font-size: 0border-width: 16px 24pxborder-style: dashed dashed dashed solidborder-color: transparent transparent transparent red</span <span style=position: absoluteleft: 14pxtop: -32pxwidth: 0height: 0font-size: 0border-width: 16pxborder-style: dashed dashed solid dashedborder-color: transparent transparent #fff transparent</span纯CSS实现三角形箭头布局的代码</div
<div style=position: relativebackground: redwidth: 160pxpadding: 20pxcolor: #fffmargin-bottom: 30px<span style=position: absoluteleft: 0pxtop: -12pxwidth: 188pxheight: 0font-size: 0border-width: 6pxborder-style: dashed dashed solid dashedborder-color: transparent transparent red transparent</span 模拟梯形边<span style=position: absoluteleft: 0pxbottom: -12pxwidth: 188pxheight: 0font-size: 0border-width: 6pxborder-style: solid dashed dashed dashedborder-color: red transparent transparent transparent</span </div
<h2看看这个例子就会明白所谓三角边了</h2
