Мне нужно создать срезанные углы, но при этом 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>
Под "контуром" ты имеешь в виду border
?
да точно граница
Один из вариантов — добавить обертку 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>
Примечание: это не будет работать с вашим rgba
background-color
, потому что у него не может быть opacity
из .1
. Поэтому вместо этого я использовал hex
того же цвета.
спасибо за помощь, но почему бы не использовать div вместо ::before
@GLobeasd Потому что это не сработает. Он все равно будет обрезан clip-path
...
Я предполагаю, что цвет самого контура можно применить к пути клипа, но я не знаю, как это сделать