题主请一开始就把问题说清楚好吧。
- 首页案例
- 首页案例
.example {
overflow: hidden;
background: #f5d7b7;
height: 44px;
padding: 0;
line-height: 44px;
}
.example > li {
float: left;
position: relative;
width: 50%;
text-align: center;
list-style: none;
}
.example > li:before, .example > li:after {
position: absolute;
top: 0;
}
.example > li:before {
width: 44px;
height: 44px;
right: -43px;
background: inherit;
}
.example > li:after {
right: -44px;
border: 22px solid;
border-color: transparent #f5d7b7 #f5d7b7 transparent;
}
.example > li.active {
background: -webkit-linear-gradient(top, #f3941d, #f3941d 50%, #f08513 50%, #f08513);
}
.example > li.active:before, .example > li.active:after {
content: '';
}
以上是举个小例子。
以下原答案。
拼凑两个图形即可。
.example {
position: relative;
width: 100px;
height: 50px;
color: #ffff00;
}
.example:before, .example:after {
content: '';
position: absolute;
top: 0;
}
.example:before {
left: 0;
width: 50px;
height: 50px;
background-color: currentColor;
}
.example:after {
right: 0;
border: 25px solid;
border-color: transparent transparent currentColor currentColor;
}