如何用css在另一个空中飞人里面做一个圆形的空中飞人

Question

我需要有关此问题的帮助

我想使用css这样的图形：

我想做一个空中飞人，中间有一个“圆形”凸起。

我试图将z-index 0的空中飞人放回去，将z-index 1的另一个四舍五入，但是我做不到。对我来说，另一种解决方案是使用svg，但两者都没有，这使我更加复杂。

感谢您的帮助。

我试图这样做：

<style>
.left {
height: 66px;
background: blue;
float: left;
position: relative;
border-top-right-radius: 19px;
width: 370px;
}

.left:after {
content: '';
position: absolute;
right: -23.5px;
bottom: 0px;
border-top: rgba(255,255,255,0.1) 56px solid;
border-left: 26px solid #0000ff;
width: 0;
z-index: 1;
}

#trapezoid {

border-bottom: 100px solid #0000ff;
border-right: 50px solid transparent;
height: 0;
width: 330px;

 }

`

Answer 1

您可以使用偏斜变换，如下所示：

.box {
  height:100px;
  margin-right:50px;
  position:relative;
  z-index:0;
  transform:skew(25deg);
  transform-origin:bottom left;
}
.box:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:20px;
  bottom:50%;
  background:green;
}

.box:after {
  content:"";
  position:absolute;
  top:50%;
  left:0;right:0;bottom:0;
  background:green;
  border-top-right-radius:20px;
}

body {
 margin:0;
}

<div class="box"></div>

Answer 2

减小梯形的宽度

.left {
height: 66px;
background: blue;
float: left;
position: relative;
border-top-right-radius: 19px;
width: 370px;
}

.left:after {
content: '';
position: absolute;
right: -23.5px;
bottom: 0px;
border-top: rgba(255,255,255,0.1) 56px solid;
border-left: 26px solid #0000ff;
width: 0;
z-index: 1;
}

#trapezoid {

border-bottom: 80px solid #0000ff;
border-right: 50px solid transparent;
height: 0;
width: 300px;

 }

<div id="trapezoid"></div>
<div class="left"></div>