БЛОГ НА HUSL


Как я могу показать только угловые границы?

Автор вопроса: Alexandr_TT

Мне интересно, можно ли в CSS или jQuery сделать рамку, но только для углов.
Что-то вроде этого:

  ****                         ****
    *                               *
    *                               *

                 CONTENT

    *                               *
    *                               *
    ****                         ****

Свободный перевод вопроса How can I show only corner borders? от участника @pierreaurelemartin.


Источник

Ответы (2 шт):

Автор решения: Alexandr_TT

Вот идея использования градиента и переменных CSS, где вы можете легко контролировать форму границы:

.box {
  --b:5px;   /* thickness of the border */
  --c:red;   /* color of the border */
  --w:20px;  /* width of border */
  

  border:var(--b) solid transparent; /* space for the border */
  background:
    linear-gradient(var(--c),var(--c)) top left,
    linear-gradient(var(--c),var(--c)) top left,
    linear-gradient(var(--c),var(--c)) bottom left,
    linear-gradient(var(--c),var(--c)) bottom left,
    linear-gradient(var(--c),var(--c)) top right,
    linear-gradient(var(--c),var(--c)) top right,
    linear-gradient(var(--c),var(--c)) bottom right,
    linear-gradient(var(--c),var(--c)) bottom right;
  background-size:var(--b) var(--w),var(--w) var(--b);
  background-origin:border-box;
  background-repeat:no-repeat;
  
  /*Irrelevant code*/  
  width:200px;
  height:100px;
  box-sizing:border-box;
  margin:5px;
  display:inline-flex;
  font-size:30px;
  justify-content:center;
  align-items:center;
  line-height:90px;
}
<div class="box">
some content
</div>

<div class="box" style="--c:blue;--w:40px;--b:2px">
some content
</div>

<div class="box" style="--c:green;--w:30%;--b:8px">
some content
</div>

<div class="box" style="--c:black;--w:50%;--b:3px">
some content
</div>

<div class="box" style="--c:purple;--w:10px;--b:10px">
some content
</div>

<div class="box" style="--c:orange;--w:calc(50% - 10px);--b:4px">
some content
</div>

CSS corner border only

Вы также можете получить сложную окраску, если совместите ее с маской:

.box {
  --b:5px;   /* thickness of the border */
  --c:red;   /* color of the border */
  --w:20px;  /* width of border */
  

  padding:var(--b); /* space for the border */
  
  position:relative;
  /*Irrelevant code*/  
  width:200px;
  height:100px;
  box-sizing:border-box;
  margin:5px;
  display:inline-flex;
  font-size:30px;
  justify-content:center;
  align-items:center;
  line-height:90px;
}
.box::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:var(--c,red);
  -webkit-mask:
    linear-gradient(#fff,#fff) top left,
    linear-gradient(#fff,#fff) top left,
    linear-gradient(#fff,#fff) bottom left,
    linear-gradient(#fff,#fff) bottom left,
    linear-gradient(#fff,#fff) top right,
    linear-gradient(#fff,#fff) top right,
    linear-gradient(#fff,#fff) bottom right,
    linear-gradient(#fff,#fff) bottom right;
  -webkit-mask-size:var(--b) var(--w),var(--w) var(--b);
  -webkit-mask-repeat:no-repeat;
  mask:
    linear-gradient(#fff,#fff) top left,
    linear-gradient(#fff,#fff) top left,
    linear-gradient(#fff,#fff) bottom left,
    linear-gradient(#fff,#fff) bottom left,
    linear-gradient(#fff,#fff) top right,
    linear-gradient(#fff,#fff) top right,
    linear-gradient(#fff,#fff) bottom right,
    linear-gradient(#fff,#fff) bottom right;
  mask-size:var(--b) var(--w),var(--w) var(--b);
  mask-repeat:no-repeat;
}
<div class="box">
some content
</div>

<div class="box" style="--c:repeating-linear-gradient(45deg,red,blue);--w:40px;--b:2px">
some content
</div>

<div class="box" style="--c:repeating-linear-gradient(90deg,#000 0 5px,transparent 5px 10px);--w:30%;--b:8px">
some content
</div>

<div class="box" style="--c:conic-gradient(red,green,yellow);--w:50%;--b:3px">
some content
</div>

<div class="box" style="--c:purple;--w:10px;--b:10px">
some content
</div>

<div class="box" style="--c:repeating-linear-gradient(45deg,orange 0 5px,blue 5px 10px);--w:calc(50% - 10px);--b:4px">
some content
</div>

CSS corner only multi-color

А почему бы не с радиусом:

.box {
  --b:5px;   /* thickness of the border */
  --c:red;   /* color of the border */
  --w:20px;  /* width of border */
  --r:25px;  /* radius */
  

  padding:var(--b); /* space for the border */
  
  position:relative;
  /*Irrelevant code*/  
  width:200px;
  height:100px;
  box-sizing:border-box;
  margin:5px;
  display:inline-flex;
  font-size:30px;
  justify-content:center;
  align-items:center;
  line-height:90px;
}
.box::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:var(--c,red);
  padding:var(--b);
  border-radius:var(--r);
  -webkit-mask:
    linear-gradient(#fff,#fff) top   /calc(100% - 2*var(--w)) var(--b),
    linear-gradient(#fff,#fff) bottom/calc(100% - 2*var(--w)) var(--b),
    linear-gradient(#fff,#fff) left  /var(--b) calc(100% - 2*var(--w)),
    linear-gradient(#fff,#fff) right / var(--b) calc(100% - 2*var(--w)),
    linear-gradient(#fff,#fff) content-box,
    linear-gradient(#fff,#fff);
  -webkit-mask-composite:destination-out;
  -webkit-mask-repeat:no-repeat;
  mask:
    linear-gradient(#fff,#fff) top   /calc(100% - 2*var(--w)) var(--b),
    linear-gradient(#fff,#fff) bottom/calc(100% - 2*var(--w)) var(--b),
    linear-gradient(#fff,#fff) left  /var(--b) calc(100% - 2*var(--w)),
    linear-gradient(#fff,#fff) right / var(--b) calc(100% - 2*var(--w)),
    linear-gradient(#fff,#fff) content-box,
    linear-gradient(#fff,#fff);
  mask-composite:exclude;
  mask-repeat:no-repeat;
}
<div class="box">
some content
</div>

<div class="box" style="--c:repeating-linear-gradient(45deg,red,blue);--w:40px;--b:2px;--r:40px;">
some content
</div>

<div class="box" style="--c:repeating-linear-gradient(90deg,#000 0 5px,transparent 5px 10px);--w:30%;--b:8px">
some content
</div>

<div class="box" style="--c:conic-gradient(red,green,yellow);--w:50%;--b:3px">
some content
</div>

<div class="box" style="--c:purple;--w:10px;--b:10px;--r:0px">
some content
</div>

<div class="box" style="--c:repeating-linear-gradient(45deg,orange 0 5px,blue 5px 10px);--w:calc(50% - 10px);--b:4px;--r:10px">
some content
</div>

Corner only border with radius and CSS gradient

Свободный перевод ответа от участника @Temani Afif.

→ Ссылка
Автор решения: Alexandr_TT

Это еще одна отличная альтернатива, если теперь вы хотите начать использовать векторы, чтобы обеспечить большую отзывчивость.

<svg viewBox="0 0 100 100" width="50px">
  <path d="M25,2 L2,2 L2,25" fill="none" stroke="black" stroke-width="3" />
  <path d="M2,75 L2,98 L25,98" fill="none" stroke="black" stroke-width="3" />
  <path d="M75,98 L98,98 L98,75" fill="none" stroke="black" stroke-width="3" />
  <path d="M98,25 L98,2 L75,2" fill="none" stroke="black" stroke-width="3" />
</svg>

SVG - отличный инструмент для использования. Вот некоторые из преимуществ использования SVG в этом случае:

  • Контроль кривой
  • Контроль заливки (непрозрачность, цвет)
  • Контроль обводки (ширина, непрозрачность, цвет)
  • Количество кода
  • Меньшее время наращивать и поддерживать форму кривой
  • Масштабируемый
  • Нет HTTP-запроса (если используется встроенный, как в примере)

Свободный перевод ответа от участника @Stewartside

→ Ссылка

licensed under cc by-sa 3.0 with attribution.