Подскажите, как заверстать такую фигуру? Пробовал с border-radius - не смог, так же пробовал псевдо элементы :after :before - не смог.
1 ответ
Не Pixel Perfect, но близко к тому:
/* Only for demo --> */ body { margin: 0; min-height: 100vh; display: grid; place-items: center; }
.wrap {
position: relative;
display: inline-flex;
/* Масштаб */
font-size: 1.3vw;
}
ul.bg {
list-style: none;
position: absolute;
z-index: -1;
display: inline-flex;
flex-direction: row-reverse;
margin: 0; padding: 0;
border-radius: 2em 10.375em 11.5625em 2em / 50% 50% 50% 50%;
transform-origin: left center;
perspective-origin: left center;
transform: perspective(18.75em) rotatey(7.6deg);
box-shadow: 0.3125em 0 0.0625em #c6e2f2;
}
ul.bg li {
display: block;
height: 20.5em;
padding: 0;
box-sizing: border-box;
box-shadow: inset 0 0 0.125em 0.125em #c6e2f2;
}
ul.bg li:nth-of-type(1) { width: 64.75em; margin: 0 0 0 -4.5em; border-radius: 0em 10.375em 11.5625em 0em / 0em 50% 50% 0em; background-color: #fbeced; }
ul.bg li:nth-of-type(2) { width: 40.8125em; margin: 0 0 0 -3em; border-radius: 0em 4.5em 3.1875em 0em / 0em 62% 30% 0em; background-color: #fff7ed; }
ul.bg li:nth-of-type(3) { width: 30.875em; margin: 0 0 0 -2em; border-radius: 0em 3em 2.0625em 0em / 0em 12.0625em 7.375em 0em; background-color: #fff7ed; }
ul.bg li:nth-of-type(4) { width: 23.1875em; margin: 0; border-radius: 2em 2em 2em 2em / 50% 50% 50% 50%; background-color: #e9f8fa; }
ul.content {
list-style: none;
display: flex;
height: 20.5em;
margin: 0; padding: 0;
}
ul.content li {
display: grid;
place-items: center;
height: 20.5em;
padding: 0;
box-sizing: border-box;
}
ul.content li:nth-of-type(1) { width: 19.125em; color: #2ebad3; }
ul.content li:nth-of-type(2) { width: 18em; color: #333333; }
ul.content li:nth-of-type(3) { width: 16.75em; color: #333333; }
ul.content li:nth-of-type(4) { width: 18.375em; color: #cf4843; }
ul.content li > span { font-family: sans-serif; font-size: 3em; }
<div class="wrap">
<ul class="bg">
<li></li><li></li><li></li><li></li>
</ul>
<ul class="content">
<li><span>25%</span></li>
<li><span>45%</span></li>
<li><span>29%</span></li>
<li><span>11%</span></li>
</ul>
</div>
-
1Юра, открой тайну, с помощью какого инструмента получаешь такие точные значения = width: 40.8125em 10 сен 2021 в 16:02
-
4
-
-
1
-