Блог

Главная - Вопросы по программированию - Создание неудобной формы div

Создание неудобной формы div

#css

#css

Вопрос:

Мне было интересно, возможно ли создать сложную форму с div, похожую на следующую:

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

По сути, это закругленный квадрат с загнутыми внутрь углами. Цель состоит в том, чтобы использовать фоновое изображение для его заполнения. Я мог бы выполнить это с помощью маски-клипа со следующим путем SVG:

 <path id="Path_1386" data-name="Path 1386" d="M20.148,599.906,455.922,482.262a15.989,15.989,0,0,0,11.817-15.433V139.242a15.986,15.986,0,0,0-11.632-15.381L20.335.613A15.984,15.984,0,0,0,0,15.994V584.475a15.983,15.983,0,0,0,20.148,15.431" transform="translate(0 0)" />

Но немного неудобно работать с этим в CSS для адаптивного изменения размера.

Комментарии:

1. Отличный вопрос, и я не знаю, сможете ли вы сделать это без SVG. Взгляните на этот сайт, polypane.app/css-3d-transform-examples , 3D Transform #13 от hqdrone на CodePen

Ответ №1:

Вариант 1 ( transform )

Используйте transform: perspective() с tranfrom: rotateY() .

 #box {
    background-color: #f00;
    border-radius: 40px;
    height: 300px;
    margin: 20px 0 0 20px;
    transform: perspective(300px) rotateY(10deg);
    width: 300px;
} 
 <div id="box"></div>

Пример на Jsfiddle

Вариант 1.1

Используйте transform: matrix3d() . Вы можете использовать генератор здесь

 #box {
    background-color: #f00;
    border-radius: 40px;
    height: 300px;
    margin: 50px 0 0 50px;
    transform: matrix3d(0.98,0,0.17,.0005,0.00,1,0.00,0,-0.17,0,0.98,0,0,0,0,1);
    width: 300px;
} 
 <div id="box"></div>

Пример на Jsfiddle

Вариант 2 ( perspective с transform )

Используйте perspective с transform: rotateY() . Эту опцию можно использовать perspective-origin для указания позиции.

 #perspective-box {
    perspective: 400px;
    perspective-origin: left;
}

#box {
    background-color: #f00;
    border-radius: 40px;
    height: 300px;
    margin: 20px 0 0 20px;
    transform-style: preserve-3d;
    transform: rotateY(15deg);
    width: 300px;
} 
 <div id="perspective-box">
    <div id="box"></div>
</div>

Пример на Jsfiddle

Вариант 2.1

Используйте perspective с transform: rotate3D() .

 #perspective-box {
    perspective: 700px;
}

#box {
    background-color: #f00;
    border-radius: 40px;
    height: 300px;
    margin: 50px 0 0 50px;
    transform: rotate3D(0, 1, 0, 30deg);
    width: 300px;
} 
 <div id="perspective-box">
    <div id="box"></div>
</div>

Пример на Jsfiddle

Ответ №2:

clip-path в сочетании с SVG-фильтром это можно сделать. Отрегулируйте стандартное отклонение фильтра для управления радиусом.

 .box {
  width:200px;
  height:300px;
  display:grid;
  margin:20px;
  filter: url('#goo');
}

.box > div{
  clip-path:polygon(0 0,100% 20%,100% 80%,0 100%);
  background:url(https://picsum.photos/id/1069/200/300)
} 
 <div class="box">
  <div></div>
</div>


<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
        <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />    
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
</svg>

Метки: