css反向圆角（弧形边框）

效果类似于谷歌浏览器的tab，如图：

代码实现的效果：

主要使用伪类以及给伪类设置背景实现

按钮

<div class="box"> <div class="arc-button"> 点我一下 </div> </div>

css部分

.box { margin: 30px; } .arc-button { height: 36px; line-height: 36px; background: #FFD664; display: inline-block; width: 120px; text-align: center; border-radius: 16px 16px 0px 0px; color: #fff; position: relative; } .arc-button::after, .arc-button::before { content: ''; position: absolute; bottom: 0px; width: 16px; height: 16px; } .arc-button::before { left: -16px; background: radial-gradient(circle at 0 0, transparent 16px, #FFD664 16px); } .arc-button::after { right: -16px; background: radial-gradient(circle at 100% 0, transparent 16px, #FFD664 16px); }

还可以添加 transform 属性旋转

.arc-button{ transform: perspective(36px) rotateX(20deg); /* 设置变形原点 */ transform-origin: center bottom; }