Как сделать блок с обрезанными краями под угол, и закруглить углы?

Ничего сложного, все максимально просто делается на примитивах через трансформацию + перспективу + псевдоэлемент. Вот тебе пример кода, повторяющего эффект на три линии, думаю этого хватит для понимания самого принципа.

 .block { 

   position: absolute; 

   height: 100px; 

   border-radius: 10px; 

   transform: perspective(400px) rotateX(-30deg); 

   overflow: hidden; 

} 

 

.block:after { 

   content: ''; 

   position: absolute; 

   bottom: 0; 

   display: block; 

   width: 100%; 

   height: 10px; 

   border-radius: 5px; 

} 

 

.block-1 { 

   top: 400px; 

   left: 300px; 

   width: 400px; 

   background-color: #995AFF; 

} 

 

.block-1:after { 

   background-color: #8136FD; 

} 

 

.block-2 { 

   top: 300px; 

   left: 250px; 

   width: 500px; 

   background-color: #FFC148; 

} 

 

.block-2:after { 

   background-color: #F9B32B; 

} 

 

.block-3 { 

   top: 200px; 

   left: 200px; 

   width: 600px; 

   background-color: #5E566B; 

} 

 

.block-3:after { 

   background-color: #4D445B; 

} 

Один блок рисуется примерно так:

  

.d2 { 

width:200px; height:50px; 

background-color:#ccf; 

clip-path: path('M 10,0 190,0 Q 200,0 200,10 L 190,40 Q 185,50 170,50 L 35,50 Q 15,50 10,40 L 0,10 Q 0,0 10,0 Z'); 

} 

 

 

clippath. Попробуй еще fancy, может поможет
https://9elements.github.io/fancy-border-radius/full-control.html#71.10.71.5-93.90.93.95-100.475

Вы можете использовать свойство border-radius в CSS для создания блока с закругленными углами. Вот пример кода:

.block {
width: 200px;
height: 200px;
background-color: #f2f2f2;
border-radius: 20px;
}
Этот код создаст блок с закругленными углами и серым фоном. Чтобы обрезать края блока, вы можете использовать свойство overflow:

.block {
width: 200px;
height: 200px;
background-color: #f2f2f2;
border-radius: 20px;
overflow: hidden;
}
Этот код скроет все содержимое блока, которое выходит за его границы.