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

Мне нужна помощь с этой проблемой

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

trapeze with protuberance

Хочу сделать трапецию с «закругленным» выступом посередине.

Я попытался вернуть трапецию с 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;

 }

`

Добро пожаловать в stack overflow, пожалуйста, покажите нам, что вы пробовали до сих пор, мы не можем многое сделать, не увидев вашего стиля и разметки.

awiebe 26.10.2018 05:11

Вы имеете в виду трапецию?

Cup of Java 26.10.2018 05:15

у вас есть набор этих вопросов? :) stackoverflow.com/questions/52980984/…

Temani Afif 26.10.2018 09:20
0
3
95
2

Ответы 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>

Вы можете использовать преобразование перекоса, как показано ниже:

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

Другие вопросы по теме