这个好像很难用css做到, 不过或许可以考虑用svg做, 也可以用border-radius和背景颜色(多个元素嵌套排版)做, 不过做出的效果, 和这个区别有点大, 下面是一个例子
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
dl.xz{
background-color: #ff6000
overflow: hidden
margin: 0
padding: 0
}
dl.xz dt,dl.xz dd{
float:left
height: 40px
line-height: 40px
margin: 0
padding: 0
}
dl.xz dt{
background-color: #fff
overflow: hidden
}
dl.xz dt>span{
width:15px
float: left
height: 100%
display: block
background: #fff
}
dl.xz dt>span>span{
width:100%
height: 100%
display: block
background: #ff6000
border-top-left-radius: 15px
}
dl.xz dt>span.left{
width:60px
background-color: #ff6000
}
dl.xz dt>span.left>span{
background: #fff
border-bottom:2px solid #ff6000
border-bottom-right-radius: 30px
border-top-left-radius: 0
height: 38px
}
</style>
</head>
<dl class="xz">
<dt>
<span class="left"><span></span></span><span class="right"><span></span></span>
</dt>
<dd>测试按钮</dd>
</dl>
<body>
</body>
</html>
CSS:
.grup{
padding-top: 104px
position: relative
border-radius: 15px
margin-bottom: 217px
}
.grup .img{
width: 370px
height: 87px
position: absolute
top:-48px
margin-left: calc(50% - 185px)
z-index:999
background: linear-gradient(
115deg, /*背景分割倾斜角度*/
#fff 0%,
#fff 40%,
#3596EB 40%,
#3596EB 100%
)
border: 4px solid #3596EB
border-radius: 44px
}
.grup .img .coun{
display: flex
justify-content: space-around
}
.grup .img .coun div{
display: flex
line-height: 88px
}
.grup .img .coun .left{
color:#3596EB
font-size: 32px
letter-spacing: 3px
font-weight: 500
}
.grup .img .coun .right{
color:#fff
font-size: 28px
letter-spacing: 3px
font-weight: 500
}
HTML:
<div class="up grup">
<div class="img">
<div class="coun">
<div class="left">新建</div>
<div class="right">所有文集</div>
</div>
</div>
</div>
效果：
