HTML还边框角度,html – 分隔li元素的有角度的边框

使用CSS：

li {

float: left;

background: #ccc;

margin-right: 50px;

}

li > a {

text-decoration: none;

display: block;

position: relative;

line-height: 40px;

padding: 0 8px;

color: #444;

text-shadow: 0 1px 0 #fff;

}

li > a:before {

content: '';

position: absolute;

border: 20px solid #ccc;

border-left-color: transparent;

border-top-color: transparent;

right: 100%;

top: 0;

}

li > a:after {

content: '';

position: absolute;

border: 20px solid #ccc;

border-right-color: transparent;

border-bottom-color: transparent;

left: 100%;

top: 0;

}

li:first-child > a {

background: #aaa;

}

li:first-child > a:after {

border-top-color: #aaa;

border-left-color: #aaa;

}

li:last-child > a {

background: #ddd;

}

li:last-child > a:before{

border-right-color: #ddd;

border-bottom-color: #ddd;

}

li:last-child > a:after {

border: 0;

}

这是基本的东西.您应该稍微努力将其用于您的目的.