Создайте согласованную рамку с помощью CSS border-image

Я пытаюсь создать границу вокруг квадрата с отрезанным углом.

Я попытался создать это, используя border-image, но у меня возникли некоторые проблемы с получением границы шириной 0,1 рем по всему периметру. граница срезанного угла кажется немного меньше остальных границ. Есть ли способ создать одинаковую ширину вокруг объекта?

вот CSS

.news-card {
    position: relative;
    padding: 1em;
    height:41rem;
    width: 30rem;
    
    clip-path: polygon(100% 0, 100% 85%, 80% 100%, 0 100%, 0 0);

    border-image: fill 0
    conic-gradient(grey 0 0);

    &::before {
        position: absolute;
        z-index: -1;

        content: "";
        inset-block: 0.1rem;
        inset-inline: 0;
        clip-path: polygon(100% 0, 100% 85%, 80% 100%, 0 100%, 0 0);
      
        border-image: fill 0/0.1rem/0.1rem 0
        conic-gradient(white 0 0);
    }
}

вот ссылка на мой код https://codepen.io/Shelas/pen/MWRvNdj

.1rem эквивалентно 1.6px в большинстве браузеров. Большинство браузеров округляют дробные значения пикселей в большую или меньшую сторону. - stackoverflow.com/questions/22830473/…

— 28.03.2024 15:47

@Paulie_D Вы имеете в виду, что 1rem равен 16px. Это действительно так. Но я думаю, проблема в округлении.

— 28.03.2024 16:03

css border border-image

28.03.2024 15:31

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Используйте один clip-path, и вы сможете получить значения из моего генератора: https://css-generators.com/custom-corners/#4

.box {
  position: relative;
  height: 300px;
}
.box:before {
  content: "";
  position: absolute;
  inset: 0;
  background: red;
  clip-path: polygon(0 0,100% 0,100% calc(100% - 80px),calc(100% - 80px) 100%,0 100%,0 0,.1rem  .1rem ,.1rem calc(100% - .1rem),calc(100% - 80px - 0.04rem) calc(100% - .1rem),calc(100% - .1rem) calc(100% - 80px - 0.04rem),calc(100% - .1rem) .1rem,.1rem .1rem);
}