如下图红线圈起来的部分怎么用css实现
transform:skew(45deg);
伪类，相对于本身元素 相对定位
<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>
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
暂无简介
文章 0 评论 0
接受
发布评论
评论（3）
transform:skew(45deg);
伪类，相对于本身元素 相对定位