如下图红线圈起来的部分怎么用css实现
<html>
<head>
<style type="text/css">
.flex-row {display:-webkit-flex;display:flex;-webkit-flex-direction:row;flex-direction:row;}
.flex-row > .flex-main {-webkit-flex:1 1 auto;flex:1 1 auto;}
.flex-row > .flex-side {-webkit-flex:0 0 auto;flex:0 0 auto;}
.nav-list {overflow:hidden;border-left:1px solid #000;}
.nav-list .nav-item {position:relative;padding:0 1em;line-height:2em;color:transparent;}
.nav-list .nav-item:before {content:'\200B';position:absolute;top:0;bottom:0;left:0;right:0;border:1px solid #000;transform:skewX(30deg);}
.nav-list .nav-item:after {content:attr(data-label);position:absolute;top:0;bottom:0;left:0;right:0;padding:0 1em;color:#000;}
.nav-list .nav-item:first-child {margin-left:-0.55em;}
.nav-list .nav-item.active:before {background-color:#999;}
.nav-list .nav-item.active:after {color:#FFF;}
</style>
</head>
<body>
<div class="flex-row nav-list">
<div class="flex-side nav-item active" data-label="日">日</div>
<div class="flex-side nav-item" data-label="周">周</div>
<div class="flex-side nav-item" data-label="月">月</div>
<div class="flex-side nav-item" data-label="年">年</div>
</div>
</body>
</html>
10 回答11k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答5.1k 阅读✓ 已解决
3 回答1.8k 阅读✓ 已解决
5 回答1.9k 阅读
transform:skew(45deg);