<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> div{ margin:0 auto; margin-bottom: 10px; } #triangle-up{ width:0; height:0; border-left:80px solid transparent; border-right:80px solid transparent; border-bottom:100px solid blue; } #triangle-right{ width:0; height:0; border-top:80px solid transparent; border-bottom:80px solid transparent; border-left:100px solid blue; } #triangle-left{ width:0; height:0; border-top:80px solid transparent; border-bottom:80px solid transparent; border-right:100px solid blue; } #triangle-down{ width:0; height:0; border-left:80px solid transparent; border-right:80px solid transparent; border-top:100px solid blue; } #triangle-up-left{ width:0; height:0; border-top:100px solid orange; border-right:100px solid transparent; } #triangle-up-right{ width:0; height:0; border-top:100px solid orange; border-left:100px solid transparent; } #triangle-down-left{ width:0; height:0; border-bottom:100px solid orange; border-right:100px solid transparent; } #triangle-down-right{ width:0; height:0; border-bottom:100px solid orange; border-left:100px solid transparent; } </style> </head> <body> <div id="triangle-up"></div> <div id="triangle-down"></div> <div id="triangle-left"></div> <div id="triangle-right"></div> <div id="triangle-up-left"></div> <div id="triangle-down-right"></div> <div id="triangle-up-right"></div> <div id="triangle-down-left"></div> </body> </html>
border:border-width border-style border-color
border-top-color/style/width
border-right-color/style/width
border-bottom-color/style/width
border-left-color/style/width
画三角的核心就是内容区域的width height 要为0，不然会计算到里面，边框颜色无法重合。
border-color 要是 transparent 透明。border设置以后会存在占位，如果写箭头朝上的边框，那么border-top就干脆不要写，这样上面就不会有占位。箭头是紧贴顶部。
箭头朝上的css设置。
div { width:0px; height:0px; border-left:100px solid transparent; border-bottom:100px solid blue; border-right:100px solid transparent; }