Как сделать карточку CSS c вырезом по бокам?

Question

[fronMood]

Добрый день!

Подскажите, пожалуйста, как можно сверстать такую карточку? Сложность возникла реализации вырезов в виде треугольников по середине боков карточки. Необходимо, чтобы карточка реагировала на ховер и другие активности и меняла цвет рамки.



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

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

Comments

[Вадим]

как можно вот эти прорези на карточке сделать немного округленные

Скруглённость можно достичь увеличением количества точек.

Возможно, с помощью css свойства clip-path polygon

через mask-image ещё можно или через свг.

Answer 1

[Владимир Юрченков]

Я думаю вам подойдут псевдоэлементы. Типо:

<div class="container">
</div>

.container{
  width: 200px;
  height: 200px;
  background-color: red;
  position: relative;
}
.container:after{
  content:"";
  position: absolute;
  top: 45%;
  left: 0px;
  transform: translateX(-20%);
  transform: rotate(-90deg);
  border:15px solid;
  border-color: #fff transparent transparent transparent;
}

.container:before{
  content:"";
  position: absolute;
  top: 45%;
  right: 0px;
  transform: translateX(-20%);
  transform: rotate(90deg);
  border:15px solid;
  border-color: #fff transparent transparent transparent;
}

p.s только кроссбраузерностью сами займитесь

Comments

[fronMood]

При реализации такого метода столкнулся с такой проблемой, что фон под псевдоэлементами не виден...

[Владимир Юрченков]

fronMood, тогда гуглите clip-path

Вот вам пример, треугольника снизу:

.container {
  background: #2E5C5C;
  -webkit-clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    calc(50% + 10px) 100%,
    50% calc(100% - 10px),
    calc(50% - 10px) 100%,
    0 100%
  );
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    calc(50% + 6px) 100%,
    50% calc(100% - 6px),
    calc(50% - 6px) 100%,
    0 100%
  );

[Владимир Юрченков]

fronMood, вот тут легче всего.
Если выберите Decagon, легко сделаете что нужно.

[fronMood]

Владимир Юрченков, такое тоже пробовал. И вроде реализовал, как надо, НО... потом заметил, что на пакете этот треугольный вырез сделан округленно...



В вопросе как раз описал, что я практиковал этот вариант, но вот как именно эту округлость сделать, не понял

[Владимир Юрченков]

fronMood, добавьте еще точки на шаге угла, и получите скругление.

[Владимир Юрченков]

fronMood, как то так, дальше крутите сами

clip-path: polygon( 0 44%, 0 0, 100% 0%, 100% 0%, 100% 0%, 100% 43%, 86% 49%, 86% 51%, 100% 59%, 100% 100%, 0 100%, 0% 59%, 14% 51%, 14% 49%, 14% 49%);

[fronMood]

Спасибо!

Answer 2

[Spaceoddity]

В теории можно, но возни много. Всё "рисование на css" сводится к разделению фигур на более простые составляющие, реализуемые через css. Вот вам пару вариантов реализации (справа и слева):

И да, бордер при этом можно будет реализовать (в крайнем случае через перекрытие элементов).

UPD: Проще всего, кстати, построить эту фигуру по вертикали: прямоугольник с закругленными верхними углами, две узких равнобедренных трапеции, прямоугольник с закругленными нижними углами:

Comments

[fronMood]

Большое спасибо!

Answer 3

[godsplan]

Сделать фон свг картинкой

Comments

[fronMood]

Не понимаю, как мне поможет это сделать вырез на карточке.

[godsplan]

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

[fronMood]

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

[godsplan]

fronMood, https://codepen.io/poylar/pen/RwjpQaZ
только вот эту картинку которую я вставил принтскрином, нужно взять в пнг или свг чтобы была прозрачность

[fronMood]

godsplane, а, т.е. саму рамку сделать картинкой, без css изощренностей) Насколько это "законно")

Спасибо за вариант)

[Spaceoddity]

fronMood, вполне "законно", если уж дизайнер на такое сподобился. тут сложность в том, что вам надо будет две картинки - одна с бордером для ховера. и по ховеру менять opacity и т.п.