css梯形按钮组

新手上路,请多包涵

如下图红线圈起来的部分怎么用css实现
image.png

阅读 3.3k
3 个回答

transform:skew(45deg);

image.png

伪类,相对于本身元素 相对定位

<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>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题