Clip-path с неповрежденной рамкой с использованием чистого css

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

.bottominfo {
  bottom: 1.9%;
  left: 5.7%;
  background-color: rgba(204, 0, 2, 0.1);
  border: 1px solid #FF003C;
  position: absolute;
  clip-path: polygon(7% 0, 100% 0, 100% 30%, 100% 70%, 93% 100%, 30% 100%, 0 100%, 0% 30%);
  width: 50vw;
  height: 11vw;
}
<div class = "bottominfo"></div>

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

GLobeasd 19.10.2022 21:17

Под "контуром" ты имеешь в виду border?

Kameron 19.10.2022 21:25

да точно граница

GLobeasd 19.10.2022 21:28
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
3
50
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Один из вариантов — добавить обертку div и использовать другую clip-path для создания border. По сути, это имитирует border.

Сначала установите обертку div с background-color нужного border-color. Затем используйте тот же clip-path в этом новом div и укажите значение inset, которое будет определять ваш border-width.

/* Center Demo */
html,
body {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.bottominfo {
  background-color: #fddde6;
  position: absolute;
  inset: 1px; /* border width */
  clip-path: polygon(7% 0, 100% 0, 100% 30%, 100% 70%, 93% 100%, 30% 100%, 0 100%, 0% 30%);
}

.bottominfo-wrapper {
  background-color: #FF003C;
  position: relative;
  width: 50vw;
  height: 11vw;
  clip-path: polygon(7% 0, 100% 0, 100% 30%, 100% 70%, 93% 100%, 30% 100%, 0 100%, 0% 30%);
}
<div class = "bottominfo-wrapper">
  <div class = "bottominfo"></div>
</div>

Примечание: это не будет работать с вашим rgbabackground-color, потому что у него не может быть opacity из .1. Поэтому вместо этого я использовал hex того же цвета.

спасибо за помощь, но почему бы не использовать div вместо ::before

GLobeasd 19.10.2022 22:06

@GLobeasd Потому что это не сработает. Он все равно будет обрезан clip-path...

Kameron 19.10.2022 22:08

Другие вопросы по теме