1.设计图:
代码:
<div
style={{
width: '200px',
height: '170px',
backgroundColor: '#333',
clipPath: 'polygon(0 0, 100% 0%, 80% 100%, 0% 100%)', //依次代表顺序为左上、右上、右下、左下
borderTopLeftRadius: '50%',
borderTopRightRadius: '10px',
borderBottomRightRadius: '10px',
borderBottomLeftRadius: '50%',
overflow: 'hidden' //确保 border-radius 的圆角效果不会被 clip-path 覆盖
}}
></div>
效果:
右边同理,换下裁剪的坐标和圆角位置