Является ли эта форма возможной в CSS, а не в клипе?

Question

Я только что узнал, что клип-путь не распознается firefox, поэтому я хотел бы создать форму, подобную той, что приведена ниже, но в CSS.

Возможно ли это?

Большое спасибо,

Answer 1

Да, вы можете использовать transform «s perspective и rotateY значения:

#elem { 
    transform: perspective(800px) rotateY(-45deg); 
} 

#cont { 
 
    border: 1px solid gray; 
 
    width: 107px; 
 
} 
 
#cont img { 
 
    transform: perspective(800px) rotateY(-45deg); 
 
    margin-left: -25px; 
 
    margin-top: 4px; 
 
}

<div id="cont"> 
 
    <img src="https://dummyimage.com/150x100/s7e/ffe" /> 
 
</div>