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

Question

我需要帮助解决这个问题

我想用 css 做一个像这样的图:

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

我试图用 z-index 0 将一个飞人放回去，另一个用 z-index 1 放回圆 Angular ，但我做不到。对我来说，另一个解决方案是使用 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>