html如何划分三角形区域,HTML – 如何使用CSS将边框放在三角形上？

jsBin demo

ul{

list-style:none;

background:#ddd;

border-bottom: 1px solid #555;

}

ul li{

display:inline-block;

}

ul li a{

color:#555;

display:inline-block;

padding:10px;

text-decoration:none;

position:relative;

}

a.selected{

color:#fff;

}

a.selected:after{ /* Our arrow */

position:absolute;

-webkit-transform: rotate(45deg);

transform: rotate(45deg);

content:" ";

width:8px;

height:8px;

border: 0 solid #555;

border-width: 1px 0 0 1px;

background:#fff;

/* Now let's auto-center our arrow inside the pos. relative A parent */

left:0;

right:0;

bottom:-5px;

margin:0 auto;

}

使用：在你的元素之后,只需设置两个边框和相同的背景颜色(为了覆盖ul的底部边框),而不是将你的小方块旋转45°就可以了.