css 外圆角旋转,外圆角实现（css）

效果图：

```

```

```

.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);

}

```