核心思路是使用[[https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements|伪元素]]+[[https://developer.mozilla.org/zh-CN/docs/Web/CSS/border|border]]

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

分割线以下是详细说明
------

以下是HTML代码
<code html>
<div >
    <a className={classes.item} href="#">{item}</a>
</div>
</code>
以下是JSS代码：
<code 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,
    },
  },
</code>

--------
主要通过如下几个代码片段来说明边框：    
<code jss>
'&:after': {
      content: '""',
      borderTop: '40px solid red',
      borderBottom: '40px solid blue',
      borderLeft: '40px solid yellow',
      borderRight: '40px solid green',
      position: 'absolute',
      right: -40,
      top: 0,
    },
</code>
{{:wiki:css特殊形状1.jpg|}}
--------
<code jss>
'&:after': {
      content: '"🦀️"',
      borderTop: '40px solid red',
      borderBottom: '40px solid blue',
      borderLeft: '40px solid yellow',
      borderRight: '40px solid green',
      position: 'absolute',
      right: -40,
      top: 0,
    },
</code>
{{:wiki:css特殊形状2.jpg|}}
--------
<code jss>
'&:after': {
      content: '"🦀️"',
      borderTop: '40px solid red',
      borderBottom: '40px solid blue',
      borderLeft: '40px solid yellow',
      position: 'absolute',
      right: -40,
      top: 0,
    },
</code>
{{::css特殊形状3.jpg|}}    
--------
<code jss>
'&:after': {
      content: '""',
      borderTop: '40px solid red',
      borderBottom: '40px solid blue',
      borderLeft: '40px solid yellow',
      position: 'absolute',
      right: -40,
      top: 0,
    },
</code>
{{::css特殊形状4.jpg|}}