任务是布置这个块
我不知道如何用剪辑路径制作形状
*,
*::after,
*::before {
padding: 0;
margin: 0;
box-sizing: border-box;
list-style-type: none;
resize: none;
outline: none;
text-decoration: none;
}
.info {
width: 680px;
}
.info__inner {
height: 100%;
}
.info__advantages {
height: 100%;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: 25px;
}
.info__advantage {
padding: 15px;
color: #ffffff;
font-size: 28px;
letter-spacing: 0.56px;
text-transform: lowercase;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
line-height: 22px;
align-self: flex-end;
}
.info__advantage:not(.info__advantage--rhombus) {
background-image: linear-gradient(98deg, #4BA6DD 16.55%, #D96BC1 42.44%, #F90 81.89%);
}
.info__advantage--rhombus {
position: relative;
z-index: 9;
width: 217px;
height: 217px;
transform: translateY(-40px);
margin: auto;
}
.info__advantage--rhombus::before {
content: "";
position: absolute;
z-index: -1;
border-radius: inherit;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
transform: rotateZ(45deg);
background-image: linear-gradient(98deg, #4BA6DD 16.55%, #D96BC1 42.44%, #F90 81.89%);
}
.info__advantage--onion {
padding: 175px 30px 30px 30px;
clip-path: polygon(50% 50%, 55% 50%, 100% 0, 100% 100%, 70% 100%, 30% 100%, 0 100%, 0 0);
position: relative;
overflow: hidden;
}
.info__advantage:nth-child(1) {
grid-column-start: 1;
grid-column-end: 3;
width: 256px;
height: 140px;
}
.info__advantage:nth-child(2) {
grid-row-start: 2;
grid-column-start: 3;
margin: auto;
}
.info__advantage:nth-child(3) {
grid-column-start: 4;
grid-column-end: 13;
}
.info__advantage:nth-child(4) {
width: 165px;
height: 165px;
}
.info__advantage:nth-child(5) {
grid-column-start: 6;
grid-column-end: 13;
width: 161px;
height: 170px;
}
.info__advantage:nth-child(6) {
grid-row-start: 3;
width: 184px;
height: 213px;
}
.info__advantage:nth-child(7) {
grid-row-start: 3;
grid-column-start: 3;
}
.info__advantage:nth-child(8) {
grid-row-start: 3;
grid-column-start: 5;
grid-column-end: 13;
width: 184px;
height: 178px;
}
.info__advantage--br-20 {
border-radius: 20px;
}
.info__advantage--br-140 {
border-radius: 140px;
}<div class="info">
<div class="info__inner">
<ul class="info__advantages">
<li class="info__advantage info__advantage--br-20">профессиональное комьюнити</li>
<li class="info__advantage info__advantage--br-20 info__advantage--rhombus">дипломная работа — собственный мультфильм</li>
<li class="info__advantage info__advantage--br-140">только в России свыше 12 000 заказов ежедневно</li>
<li class="info__advantage info__advantage--br-140">портфолио к выпуску</li>
<li class="info__advantage info__advantage--br-20">растущая индустрия с оборотом 150 млрд</li>
<li class="info__advantage info__advantage--br-140">стажировки и практики с 1 курса</li>
<li class="info__advantage info__advantage--br-20 info__advantage--onion">преподаватели-практики</li>
<li class="info__advantage info__advantage--br-140">уникальная творческая профессия</li>
</ul>
</div>
</div>
使用剪辑路径很难达到您想要的圆度。如果您对如何创建此类块没有限制，那么我建议您考虑 svg 而不是 Clip-path。这里有几个例子供您参考：