CSS3属性：clip-path使用（如平行四边形按钮）

一、介绍

clip-path ：使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。可以指定一些特定形状。

CSS3 clip-path在线生成器工具：tools.jb51.net/code/css3pa…

二、应用

以实现平行四边形按钮为例

1.正常状态

2.hover状态

3.active状态

代码如下：

html：

<div className="default">
   <div className="but">列表视图</div>
</div>
<div className="default" style={{marginLeft:320}}>
   <div className="but">大屏视图</div>
</div>

css：

.default {
    position: relative;
    display: inline-block;
    background: url('./img/button1.png') no-repeat;
    width: 210px;
    height: 50px;
    clip-path: polygon(22% 0%, 88% 0%, 66% 100%, 0% 100%); /*通过这个属性把形状调整为平行四边形*/
    background-size: 100% 100%;
    margin-right: -380px;
}
.but {
    position: absolute;
    top: 20px;
    left: 63px;
}


.default:hover {
    background: url('./img/button3.png') no-repeat;
}

.default:active {
    background: url('./img/button2.png') no-repeat;
}

但是通常情况下，平行四边形按钮通常会当作tab来用，包括需要默认选中等，这个时候，修改antd的Tabs样式会更简单适用

1.正常状态（正常状态下，第一个tab默认选中）

2.hover状态（鼠标移到第二个按钮上）

3.选中状态（选中第二个tab）

代码如下：

import { Tabs } from 'antd';
import React from 'react';
import './menu.css';

const App = () => {
  
  const onChange = (key) => {
    console.log(key);
  };

  const items = [
    { label: '列表视图', children: 'Content of Tab 1', key: '1' },
    { label: '大屏视图', children: 'Content of Tab 2', key: '2' },
  ]

  return (
    <>
      <Tabs
      className='tab11'
      onChange={onChange}
      type="card"
      items={items}/>
    </>
  );
};

export default App;

css： 这里仅搭了简易的环境，直接引入了antd的css，而且是在antd原有的类名上做了修改，但是建议写的时候不要直接修改antd原来的样式

@import '~antd/dist/antd.css';

.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab {
    color: #000;
    clip-path: polygon(22% 0%, 88% 0%, 66% 100%, 0% 100%);
    background: url('./img/button1.png') no-repeat;
    width: 210px;
    height: 50px;
    padding: 8px 54px;
    font-size: 18px;    
}

.ant-tabs-card.ant-tabs-top > .ant-tabs-nav .ant-tabs-tab-active {
    background: url('./img/button2.png') no-repeat;
}
.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
    color: #000;
}

.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab:hover {
    background: url('./img/button3.png') no-repeat;
    color: #000;
}
.ant-tabs-card.ant-tabs-top > .ant-tabs-nav .ant-tabs-tab + .ant-tabs-tab {
    margin-left: -71px;
}
.ant-tabs-top > .ant-tabs-nav::before {
    border-bottom: none;
}