Создание динамической формы с чистым CSS3

Question

Я очень разбираюсь в CSS, но не могу, чтобы жизнь меня показала.

Мне нужно воссоздать несколько фигур в чистом CSS (если возможно) для проекта. Что еще более усложняет, так это то, что мне нужны формы для использования фоновых изображений. Я пробовал множество свойств CSS3, таких как перекос, преобразование, поворот и т. Д. ... однако пока не работает. Скос достал меня ближе, но фон и его содержимое были перекошены. Я попытался установить изображение внутри div и придав ему противоположные свойства перекос div, который выпрямил изображение, но затем я не смог правильно позиционировать изображение.

Возможно ли в любом случае воссоздать это с помощью CSS?

Даже если кто-то может помочь мне найти подходящую недвижимость для использования, так что я могу исследовать, как это будет сделано, что было бы полезно.

Заранее спасибо.

Answer 1

Трудной форму, чтобы сделать это. Вы можете создать эту форму с помощью clip-path, но я боюсь, что поддержка не удивительна для этого свойства.

См. Поддержку here.

Теперь вот пример формы с фоном.

.shape { 
 
    width: 400px; 
 
    height: 400px; 
 
    background: #000; 
 
    -webkit-clip-path: polygon(24% 0, 100% 20%, 100% 100%, 0 40%); 
 
    clip-path: polygon(24% 0, 95% 20%, 100% 100%, 0 40%); 
 
    background-image: url(http://p1.pichost.me/640/39/1629941.jpg); 
 
    background-size: cover; 
 
}

<div class="shape"></div>

Answer 2

Это даст DIAMON, так что вы можете настроить его, чтобы получить форму:

#diamond-narrow { 
    width: 0; 
    height: 0; 
    border: 50px solid transparent; 
    border-bottom: 70px solid red; 
    position: relative; 
    top: -50px; 
} 
#diamond-narrow:after { 
    content: ''; 
    position: absolute; 
    left: -50px; top: 70px; 
    width: 0; 
    height: 0; 
    border: 50px solid transparent; 
    border-top: 70px solid red; 
} 

http://css-tricks.com/examples/ShapesOfCSS/