Есть ли простой способ сделать произвольную форму границы для HTML <div>?

Question

Я создаю веб-страницу с карточками, расположенными в сетке.

Однако я бы хотел, чтобы мои карточки имели уникальную форму, а не просто прямоугольники. Форма, которую я хотел бы, чтобы они были, - это форма папки с маниллой (изображена ниже)

Есть ли относительно простой способ сделать div с этой формой?

Answer 1

Вот начало использования только HTML и CSS:

body {
  padding: 50px;
}

div {
  position: relative;
  z-index: 1;
  white-space: nowrap;
}

div .slant {
  position: relative;
  display: inline-block;
  color: inherit;
  text-decoration: none;
  margin: 0 -14px -4px;
  width: 40px;
}

div .slant::before,
main {
  border: 0.2em solid #000;
  background: #000;
}

div .slant::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0.5em;
  left: 0;
  z-index: -1;
  border-bottom: none;
  border-radius: 5px 5px 0 0;
  background: #000;
  transform: perspective(5px) rotateX(2deg);
  transform-origin: bottom;
}

div.left .slant {
  padding: 1.5em 2em 1em 1em;
}

div.left .slant::before {
  transform-origin: bottom left;
}

main {
  display: block;
  margin: -8px 0 30px -14px;
  padding: 1em;
  border-radius: 0 5px 5px 5px;
  width: 200px;
  height: 300px;
}

<div class="left">
  <div class="slant"></div>
</div>
<main>
</main>

Answer 2

Мне потребовалось около 10 минут, чтобы сделать это, поэтому, если у вас есть мотивация, чтобы улучшить его, не стесняйтесь делать это. Это можно сделать с помощью divs и позиционирование с помощью CSS. Это всего лишь вопрос игры с z-index и формами, но если вы просто не хотите произвести впечатление на себя, добившись этого, самый простой способ - создать фоновое изображение и перенести поверх него HTML-контент.

Я не лучший программист на переднем крае, так что не расстраивайтесь! Я уверен, что кто-то еще мог бы улучшить его еще лучше с помощью границ контуров и прочего.

div#panel {
  position: absolute;
  border: 3px solid black;
  border-radius: 10px;
  width: 200px;
  height: 200px;
  background-color: white;
  top: 50%;
  left: 50%;
  z-index: 3;
  transform: translate(-50%, -50%);
}

div#box {
  position: absolute;
  border: 3px solid red;
  z-index: 0;
  border-radius: 10px;
  width: 200px;
  height: 200px;
  top: 48.5%;
  left: 50%;
  z-index: ;
  transform: translate(-50%, -50%);
}

div#box2 {
  position: absolute;
  border: 3px solid red;
  border-radius: 10px;
  width: 80px;
  height: 200px;
  background-color: white;
  top: 47%;
  left: 46.9%;
  z-index: 1;
  transform: translate(-50%, -50%);
}

<div id="panel"></div>
<div id="box">
  <p style="padding-left: 5px;"> Some text here</p>
</div>
<div id="box2"></div>

Answer 3

Вы можете использовать эту форму в качестве фонового изображения карты. Удалите свойство карты по умолчанию, например, background-color, box-shadow ...

HTML:

<div class="main-class">
    <div class="card">
        .....
    </div>
</div>

CSS:

 .main-class .card{
        background-image: url("path");
        background-repeat: no-repeat;
        background-size: cover;
        background-color: transparent;
        box-shadow: none;
    }