大螃嗨

核心思路是使用伪元素+border

核心思路是理解border的形状，是梯形。

分割线以下是详细说明

---

以下是HTML代码

<div >
    <a className={classes.item} href="#">{item}</a>
</div>

以下是JSS代码：

item: {
    display: 'block',
    float: 'left',
    height: 50,
    backgroundColor: '#e8f5e9',
    padding: '30px 40px 0px 40px',
    margin: '0px 10px 0px 0px',
    textAlign: 'center',
    position: 'relative',
    fontSize: 20,
    color: '#4caf50',
    textDecoration: 'none',
    '&:after': {
      content: '""',
      borderTop: '40px solid red',
      borderBottom: '40px solid blue',
      borderLeft: '40px solid yellow',
      borderRight: '40px solid green',
      position: 'absolute',
      right: -40,
      top: 0,
    },
  },

---

主要通过如下几个代码片段来说明边框：

'&:after': {
      content: '""',
      borderTop: '40px solid red',
      borderBottom: '40px solid blue',
      borderLeft: '40px solid yellow',
      borderRight: '40px solid green',
      position: 'absolute',
      right: -40,
      top: 0,
    },

---

'&:after': {
      content: '"🦀️"',
      borderTop: '40px solid red',
      borderBottom: '40px solid blue',
      borderLeft: '40px solid yellow',
      borderRight: '40px solid green',
      position: 'absolute',
      right: -40,
      top: 0,
    },

---

'&:after': {
      content: '"🦀️"',
      borderTop: '40px solid red',
      borderBottom: '40px solid blue',
      borderLeft: '40px solid yellow',
      position: 'absolute',
      right: -40,
      top: 0,
    },

——–

'&:after': {
      content: '""',
      borderTop: '40px solid red',
      borderBottom: '40px solid blue',
      borderLeft: '40px solid yellow',
      position: 'absolute',
      right: -40,
      top: 0,
    },