Можно ли создать контейнер div в форме папки с помощью CSS
Просто быстрый вопрос.
Мне нужно добиться этой формы для элемента контейнера (у него будут некоторые дочерние элементы, такие как меню и некоторые детали)
Единственное, о чем я могу думать, это такой многоугольник:
.folder {
background: yellow;
height: 150px;
width: 250px;
clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 11%, 46% 11%, 46% 0);
filter: drop-shadow(0 0 0.75rem grey);
}<div class = "folder"></div>Проблема в том, что я не знаю, как указать радиус границы для этой формы или как добавить тень.
Знаете ли вы, как я могу добиться таких форм? Возможно ли это даже с помощью только CSS?
Заранее спасибо.
Ответы 2
Вы можете попробовать этот подход
.container {
padding: 1em;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));
grid-gap: 2em;
}
.name {
width: 10em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 1em;
}
.folder {
height: 105px;
width: 100%;
position: relative;
background-color: white;
border: 1px solid gray;
border-radius: 0 6px 6px 6px;
box-shadow: 4px 4px 7px rgba(0, 0, 0, 0.59);
padding: 0.25em 0.5em;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
}
.folder:before {
content: "";
width: 50%;
height: 12px;
border-radius: 0 20px 0 0;
background-color: white;
border-top: 1px solid gray;
border-left: 1px solid gray;
border-right: 1px solid gray;
position: absolute;
top: -13px;
left: -1px;
}
.options {
display: flex;
column-gap: 1em;
}
.folder::after{
content: '';
position: absolute;
left: 0.8em;
width: 4em;
height: 5px;
top: -0.8em;
background: #7036E9;
border-radius: 0 0 5px 5px;
}<div class = "container">
<div class = "folder">
<h2 class = "name">Folder Name 1</h2>
<div class = "options">
<h5>Option 1</h5>
<h5>Option 2</h5>
</div>
</div>
<div class = "folder">
<h2 class = "name">Folder Name 2</h2>
<div class = "options">
<h5>Option 1</h5>
<h5>Option 2</h5>
</div>
</div>
<div class = "folder">
<h2 class = "name">Folder Name Long Name This Is</h2>
<div class = "options">
<h5>Option 1</h5>
<h5>Option 2</h5>
</div>
</div>
</div>Вот фрагмент довольно близко к вашим потребностям. Обратите внимание, что он использует clip-path: path('...'), который не поддерживается Opera atm. Если Opera нуждается в поддержке, точный эффект может быть достигнут только с использованием внешнего образа. Без него border-radius для псевдоэлемента можно произвести только пристальный взгляд. Не уверен, что это достаточно близко. Также обратите внимание, что сам путь определяется координатами статических точек, что может быть нежелательно. В таком случае он может быть сгенерирован каким-то JS.
<div class = "folder"></div>
.folder{
width: 420px;
height: 310px;
margin: 10em auto 10em;
border-radius: 5px 25px 25px 25px;
filter: drop-shadow(0 0 0.75rem grey);
background: white;
position: relative;
}
.folder::before{
content: '';
position: absolute;
top: -18px;
width: 200px;
height: 25px;
background: white;
border-radius: 25px 0 0 0;
clip-path: path('M 0 0 L 160 0 C 185 2, 175 16, 200 18 L 0 50 z');
}
.folder::after{
content: '';
position: absolute;
left: 40px;
width: 85px;
height: 5px;
top: -18px;
background: #7036E9;
border-radius: 0 0 5px 5px;
}
Спасибо отлично выглядит! У меня вопрос, что вы подразумеваете под "внешним изображением"? Можно ли по-прежнему использовать clip-path в Opera?
Извините, что беспокою вас, не могли бы вы поделиться, как вы определяете значения для пути? Я пытаюсь создать уменьшенную версию карты, но часть, созданная с помощью ::after, выглядит забавно, когда я уменьшаю ее ширину.
Под «внешним» я подразумеваю внешний по отношению к стилям (или встроенный через URL («данные: изображение..»)). Opera не поддерживает clip-path: path("..."), как сообщает МДН. Между тем могу ли я использовать нет. Я проверил с Opera (v84), и все в порядке. В любом случае вы можете использовать clip-path в Opera, но если вас интересуют более старые версии, вам придется использовать «внешний» SVG для пути клипа clip-path: url(#id_of_the_shape), как в Эта статья.
Каждое n-е (2n-1) целое число является координатой X, каждая секунда — Y. Нам нужен прямоугольник от 0 0 до 200 18 (высота 18 пикселей), поэтому я определяю 4 точки привязки по углам прямоугольника. Затем я перемещаю правую верхнюю точку на 40 пикселей влево (координата 160) и преобразовываю правую линию в кривую. Я немного поиграл с координатами контрольных точек кривой (185 2 и 175 16), чтобы добиться такого результата. И, наконец, я переместил четвертую точку на координату Y 50 (на самом деле достаточно 25), чтобы блок не обрезался в левом нижнем углу. Если вы хотите сделать это, скажем, в 1,2 раза уже, просто разделите координаты X на 1,2.
Правая сторона тега папки нуждается в кривой Безье. Также тень нужно отбрасывать через фильтр, иначе
::beforeпропустит ее (или понадобится собственная, которая будет перекрываться с тенью родителя).