Создание динамической формы с помощью чистого CSS3

Я очень хорошо разбираюсь в CSS, но я не могу понять это.

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

Можно ли как-то воссоздать это с помощью CSS?

введите здесь описание изображения

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

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


html css transform css-shapes
person kala233    schedule 06.03.2013    source источник
comment
Не могли бы вы использовать объект холста в html5 или он должен быть строго CSS3 для объекта?   -  person Tobias    schedule 06.03.2013
comment
Холст может работать, хотя я его особо не касался. Любые ссылки? Спасибо.   -  person kala233    schedule 06.03.2013

Ответы (2)


arrow_upward
3
arrow_downward

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

См. поддержку здесь.

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

.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>

person Ruddy    schedule 01.05.2015

arrow_upward
1
arrow_downward

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

#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/

person Luke Robertson    schedule 06.03.2013