Как сделать закругленную трапецию внутри другой трапеции с помощью CSS

Question

Мне нужна помощь в решении этой проблемы

Я хочу сделать с помощью css такую ​​фигуру:

Я хочу сделать трапецию с "округлый "выпуклость посередине.

Я попытался положить трапецию назад с z-индексом 0, а другой округленный с z-индексом 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>