效果图:![](https://box.kancloud.cn/725de3b318d013c51ff91ef7757f652b_260x99.png)
```
<div class="test">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
```
```
<style>
.test {
position: relative;
margin-top: 20px;
}.left {
position: absolute;
top: 0;
width: 50px;
height: 50px;
line-height: 100px;
display: block;
text-align: center;
background-image: radial-gradient(200px at 0px 0px, #fff 50px, #4ebaba 50px);
}
.middle {
width: 150px;
height: 50px;
background: #4ebaba;
position: absolute;
top: 0;
margin-left: 50px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
.right {
position: absolute;
top: 0;
margin-left: 200px;
width: 50px;
height: 50px;
line-height: 100px;
display: block;
text-align: center;
background-image: radial-gradient(200px at 50px 0px, #fff 50px, #4ebaba 50px);
}
</style>
```