Как сверстать html блок со срезаными углами?

Question

Подскажите как мне сверстать такой блок? https://jsfiddle.net/6x1ehvot/

html {
  height: 100%;
  width: 100%;
}

body {
  height: 100%;
  width: 100%;
  background: -webkit-linear-gradient(180deg, #3cd3d6, #3b2892);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(180deg, #3cd3d6, #3b2892);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}


/*Навигационный бар*/

.navbar-row {
  border-bottom: 5px solid #EA5956;
}

.navbar {
  background: none !important;
}

.navbar-light .navbar-nav .nav-link {
  color: #ff625e;
}

.nav-link-active {
  color: #66eafa !important;
  text-shadow: 0 0 5px #20e7ff, 0 0 10px #20e7ff, 0 0 20px #20e7ff, 0 0 40px #20e7ff, 0 0 80px #20e7ff, 0 0 90px #20e7ff, 0 0 100px #20e7ff, 0 0 150px #20e7ff;
}

.nav-link:hover {
  color: #f4b246 !important;
  text-shadow: 0 0 5px #7e2b2d, 0 0 10px #7e2b2d, 0 0 20px #7e2b2d, 0 0 40px #7e2b2d, 0 0 80px #7e2b2d, 0 0 90px #7e2b2d, 0 0 100px #7e2b2d, 0 0 150px #7e2b2d;
}


/* -= Навигационный бар =- */


/*Главнаи страница*/

.index-block {
  border: 3px solid #f55e5a;
  height: 50px;
  position: relative;
  /*clip-path: polygon(5px 0,100% 0,100% calc(100% - 5px), calc(100% - 5px) 100%,0 100%,0 5px);*/
}


/*==================================================*/


/* ----------------*/

.sign_word {
  color: #25cbd3;
  /*text-shadow:*/
  /*        0 0 5px #20e7ff,*/
  /*        0 0 50px #20e7ff,*/
  /*        0 0 50px #20e7ff;*/
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<body class="h-auto d-inline-block">
  <main>
    <div class="container">
      <div class="row">
        <div class="col-sm-4 index-block">text</div>
        <div class="col-sm-4 index-block">text</div>
        <div class="col-sm-4 index-block">text</div>
      </div>
    </div>

    <div class="container">
      <div class="row">
        <div class="col-sm-4 index-block">text</div>
        <div class="col-sm-4 index-block">text</div>
        <div class="col-sm-4 index-block">text</div>
      </div>
    </div>

  </main>
</body>

</html>

Я разобрал эти примеры, 1 2 3 4 но в их случаях у них есть фон, а у меня блок прозрачный. И у меня границы стираются. Очень похожий вопрос вот тут но человек там не получил ответа. Хочу сделать границы блока как на картинке.

Answer 1

Сначала мы воссоздаём аналог border при помощи linear-gradient:

.border {
  display: block;
  width: 300px;
  height: 300px;
  background-image: 
    linear-gradient(0, #f00, #f00), /* line top */
    linear-gradient(0, #f00, #f00), /* line right */
    linear-gradient(0, #f00, #f00), /* line bottom */
    linear-gradient(0, #f00, #f00); /* line left */
  background-repeat: no-repeat;
  background-position: 
    0 0, /* line top - pos left top */
    100% 0, /* line right - pos right top */
    0 100%, /* line bottom - pos left bottom */
    0 0; /* line left - pos left top */
  background-size: 
    100% 3px, /* line top - 100% 3px (width, height) */
    3px 100%, /* line right - 100% 3px (width, height) */
    100% 3px, /* line bottom - 100% 3px (width, height) */
    3px 100%; /* line left - 100% 3px (width, height) */
}

<div class="border"></div>

Далее прикидываем какие у нас будут углы, я выбрал следующие:
• Верхний левый угол будет размером 30x30px, угол получается 45°.
• Нижний правый угол будет 60x60px, тоже получается 45°.

Т.е. эти углы будут тоже градиентом, сделаем под них место.
В теории нам нужно изменить стартовую позицию background-position:
• Для верхнего левого угла нужно будет сместить верхнюю линию влево на 30px и левую вниз на 30px
• А для нижнего угла нужно левую линию сместить вверх от низа на 60px и нижнюю влево на 60px.

.border {
  display: block;
  width: 350px;
  height: 350px;
  background-image: 
    linear-gradient(0, #f00, #f00), /* line top */
    linear-gradient(0, #888, #888), /* line right */
    linear-gradient(0, #f00, #f00), /* line bottom */
    linear-gradient(0, #f00, #f00); /* line left */
  background-repeat: no-repeat;
  background-position: 
    30px 0, /* line top - pos left top */
    100% 0, /* line right - pos right top */
    60px 100%, /* line bottom - pos left bottom */
    0 30px; /* line left - pos left top */
  background-size: 
    100% 3px, /* line top - 100% 3px (width, height) */
    3px 100%, /* line right - 100% 3px (width, height) */
    100% 3px, /* line bottom - 100% 3px (width, height) */
    3px 100%; /* line left - 100% 3px (width, height) */
}

<div class="border"></div>

Если обратим внимание, то заметим, что левая линия всё равно находится у нижней границы, чтобы её "подвинуть" вверх от низа на 60px, нам нужно изменить размер этой линии background-size на 100% - (30px + 60px).
Почему именно 30px + 60px - потому что мы её сначала подвинули вниз на 30px для верхнего угла, а ещё 60px это размер нижнего угла:

.border {
  display: block;
  width: 350px;
  height: 350px;
  background-image: 
    linear-gradient(0, #f00, #f00), /* line top */
    linear-gradient(0, #888, #888), /* line right */
    linear-gradient(0, #f00, #f00), /* line bottom */
    linear-gradient(0, #f00, #f00); /* line left */
  background-repeat: no-repeat;
  background-position: 
    30px 0, /* line top - pos left top */
    100% 0, /* line right - pos right top */
    60px 100%, /* line bottom - pos left bottom */
    0 30px; /* line left - pos left top */
  background-size: 
    100% 3px, /* line top - 100% 3px (width, height) */
    3px 100%, /* line right - 100% 3px (width, height) */
    100% 3px, /* line bottom - 100% 3px (width, height) */
    3px calc(100% - 90px); /* line left - 100% 3px (width, height) */
}

<div class="border"></div>

Теперь самый интересный момент будем делать линии под наклоном.
Для этого нам поможет параметр в linear-gradient, благодаря которому создаётся наклон градиента.

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

.border {
  display: block;
  width: 350px;
  height: 350px;
  background-image: 
    linear-gradient(0, #888, #888), /* line top */
    linear-gradient(0, #888, #888), /* line right */
    linear-gradient(0, #888, #888), /* line bottom */
    linear-gradient(0, #888, #888), /* line left */
    linear-gradient(-45deg, #f00 50%, #0ff 50%), /* corner left-top */
    linear-gradient(45deg, #f00 50%, #0ff 50%); /* corner left-bottom */
  background-repeat: no-repeat;
  background-position: 
    30px 0, /* line top - pos left top */
    100% 0, /* line right - pos right top */
    60px 100%, /* line bottom - pos left bottom */
    0 30px, /* line left - pos left top */
    0 0, /* corner left-top - pos left top */
    0 100%; /* corner left-bottom - pos left bottom */
  background-size: 
    100% 3px, /* line top - 100% 3px (width, height) */
    3px 100%, /* line right - 100% 3px (width, height) */
    100% 3px, /* line bottom - 100% 3px (width, height) */
    3px calc(100% - 90px), /* line left - 100% 3px (width, height) */
    30px 30px, /* corner left-top - 30px 30px */
    60px 60px; /* corner left-top - 30px 30px */
}

<div class="border"></div>

Чтобы из градиента сделать линию, я предлагаю сделющий подход, рисуем градиент по "формуле": ↓ прозрачный цвет от 0 до (50% - (*line-weight* / 2));
↓ цвет линии от 0 до (50% - (*line-weight* / 2));
↓ цвет линии от 0 до (50% + (*line-weight* / 2));
↓ прозрачный цвет от 0 до (50% + (*line-weight* / 2));

В целом на этом всё готова. Ещё советую добавлять к прозрачному цвет значение по типу *line-weight* / 1.95.
Это что-то типо сглаживание, для того, чтобы не видеть лесенку, при 45° не особо заметно, но лучше сделать.

Готовый код с переменными:

/* То что нужно вам */
.border {
  --bw: 4px; /* border weight */
  --bc: red; /* border color */
  --blts: 30px; /* border left-top size */
  --blbs: 60px; /* border left-bottom size */
  --ms: calc(var(--blts) + var(--blbs) + var(--bw)); /* max-size | не обязательно */
  min-width: var(--ms, 0);
  min-height: var(--ms, 0);
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(0, var(--bc), var(--bc)),
    linear-gradient(0, var(--bc), var(--bc)),
    linear-gradient(0, var(--bc), var(--bc)),
    linear-gradient(0, var(--bc), var(--bc)),
    linear-gradient(135deg, transparent calc(50% - (var(--bw) / 1.75)), var(--bc) calc(50% - (var(--bw) / 2)), var(--bc) calc(50% + (var(--bw) / 2)), transparent calc(50% + (var(--bw) / 1.75))),
    linear-gradient(45deg, transparent calc(50% - (var(--bw) / 1.75)), var(--bc) calc(50% - (var(--bw) / 2)), var(--bc) calc(50% + (var(--bw) / 2)), transparent calc(50% + (var(--bw) / 1.75)));
  background-repeat: no-repeat;
  background-position: 
    var(--blts) 0, 100% 0,
    var(--blbs) 100%, 0 var(--blts),
    0 0, 0 100%;
  background-size: 
    100% var(--bw), var(--bw) 100%,
    100% var(--bw), var(--bw) calc(100% - (var(--blts) + var(--blbs))),
    calc(var(--blts) + (var(--bw) / 1.5)) calc(var(--blts) + (var(--bw) / 1.5)), calc(var(--blbs) + (var(--bw) / 1.5)) calc(var(--blbs) + (var(--bw) / 1.5));
  padding: var(--bw);
  box-sizing: border-box;
}

.border .wrap {
  display: block;
  width: 100%;
  height: 100%;
  padding: 30px 15px 60px 30px;
  box-sizing: border-box;
}
/* То что нужно вам | конец */

body {
  display: block;
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 10px;
  box-sizing: border-box;
}

.test-resize {
  display: block;
  min-width: 100px;
  width: 300px;
  max-width: 100vw;
  min-height: 100px;
  height: 300px;
  max-height: 100vh;
  overflow: hidden;
  resize: both;
}

<div class="test-resize">
  <!-- То что нужно вам -->
  <div class="border">
    <div class="wrap">border</div>
  </div>
  <!-- То что нужно вам | конец -->
</div>

Answer 2

Обрезать можно через стиль clip-path. Обвести можно через аналогичное значение <svg><path d=""></svg>.

body {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2" fill="gray" stroke="none"><rect x="0" y="0" width="1" height="1"/><rect x="1" y="1" width="1" height="1"/></svg>')
16px/16px repeat;
}
div,
svg {
  left: calc(50vw - 25vmin);
  top: calc(50vh - 25vmin);
  width: 50vmin;
  height: 50vmin;
  background: #cfc;
  position: fixed;
  clip-path: polygon(10% 0, 80% 0, 100% 10%, 100% 90%, 95% 95%, 90% 70%, 75% 50%, 80% 65%, 85% 90%, 80% 100%, 5% 100%, 0 95%, 0 10%, 10% 0);
}

<div></div>
<svg viewBox="0 0 100 100">
<path id="path" d="M 10 0 80 0 100 10 100 90 95 95 90 70 75 50 80 65 85 90 80 100 5 100 0 95 0 10 10 0 Z"
      fill="none" 
      stroke="#000" 
      stroke-width="5" />
</svg>

БЛОГ НА HUSL

Как сверстать html блок со срезаными углами?

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