Как сверстать такой квадрат?

Question

подскажите пожалуйста, как можно сверстать такой блок c квадратом:

.square {
  width: 441px;
  height: 441px;
  background: red;
  border: 18px dashed #3B3838;
}

<div class="square">
  
</div>

Answer 1

.square {
  --bg-line-h: linear-gradient(to right, #000, #000 33%, transparent 33%, transparent 67%, #000 67%);
  --bg-line-v: linear-gradient(to bottom, #000, #000 33%, transparent 33%, transparent 67%, #000 67%);
  width: 75vmin; height: 75vmin;
  box-sizing: border-box;
  margin: 10vmin auto; padding: 2vmin;
  background: top left / 100% 1vmin var(--bg-line-h),
              bottom left / 100% 1vmin var(--bg-line-h),
              top left / 1vmin 100% var(--bg-line-v),
              top right / 1vmin 100% var(--bg-line-v);
  background-repeat: no-repeat;
  background-color: #f002;
}

<div class="square">Lorem ipsum</div>

Тут размер квадрата, его отступы, и толщина линий сделаны респонсивными (подстраиваются к размерам вьюпорта) - если этого не требуется, то просто замени vmin-величины на их аналоги в абсолютных единицах, например в px.

Answer 2

Можно так, чтобы оставить элемент прозрачным:

.square {
  width: 180px;
  height: 180px;
  border-style: solid;
  border-width: 2px;
  border-image:linear-gradient(45deg, 
    black 0%, black 10%,
    transparent 10%, transparent 40%,
    black 40%, black 60%, 
    transparent 60%, transparent 90%, 
    black 90%, black 100%) 1;
}

<div class="square"></div>

Answer 3

Для разнообразия, решение SVG

С графикой должен работать SVG, для этого он и создан.
Всего одна строка кода svg - <rect .... /> и квадрат с уголками создан:

.container {
width:75vw;
height:75vh;
}

<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 0 350 350" style="background:#eee"  >  
<rect x="25" y="25" width="300" height="300" stroke-dasharray="100,200" stroke-dashoffset="50"  fill="white" stroke="black" stroke-width="6"/>
</svg>     
</div>

Длина одной стороны квадрата - 300px.
Выбираем длину уголка - 100px
Расстояние между уголками получается - 200px
Отсюда получается формула stroke-dasharray="100,200"
Сдвигаем линию на половину длины уголка stroke-dashoffset="50"

Варианты анимации

Перемещение уголка в соседний угол прямоугольника

Расстояние между начальными точками соседних уголков - 300px, поэтому перемещаем их в анимации stroke-dashoffset "values="50;-250" на 300px

.container {
width:30vw;
height:30vh;
}

<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
          viewBox="0 0 350 350" style="background:#eee"  >  
<rect x="25" y="25" width="300" height="300" stroke-dasharray="100,200" stroke-dashoffset="50"  fill="white" stroke="black" stroke-width="6">
 <animate id="an" attributeName="stroke-dashoffset" begin="svg1.click;an.end+0.5s" dur="1.5s" values="50;-250" calcMode="linear" fill="freeze" repeatCount="1" restart="whenNotActive" />
</rect>
</svg>  
</div>

Перемещение уголков туда-обратно

values="50;-250;-250;50;50" - повторение параметров обеспечивает паузы в конечных точках анимации.

.container {
width:30vw;
height:30vh;
}

<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
          viewBox="0 0 350 350" style="background:#eee"  >

<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
          viewBox="0 0 350 350" style="background:#eee"  >  
         

<rect x="25" y="25" width="300" height="300" stroke-dasharray="100,200" stroke-dashoffset="50"  fill="white" stroke="black" stroke-width="6">
 <animate id="an" attributeName="stroke-dashoffset" begin="svg1.click;an.end+1.5s" dur="6s" values="50;-250;-250;50;50" calcMode="linear" fill="freeze" repeatCount="1" restart="whenNotActive" />
</rect>
</svg>
</div>

Изображение внутри уголков + анимация

При fill="none" квадрат прозрачен и становится видна картинка

.container {
width:40vw;
height:40vh;
}

<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
          viewBox="0 0 350 350" style="background:#eee"  >  
          <!-- Изобраение пингвина -->
<image xlink:href="https://twemoji.maxcdn.com/svg/1f427.svg" y="25" x="5" width="98%" height="85%" />
<rect x="25" y="25" width="300" height="300" stroke-dasharray="100,200" stroke-dashoffset="50"  fill="none" stroke="black" stroke-width="6">
 <animate id="an" attributeName="stroke-dashoffset" begin="svg1.click;an.end+0.5s" dur="1.5s" values="50;-250" calcMode="linear" fill="freeze" repeatCount="1" restart="whenNotActive" />
</rect> 
 
</svg>  
</div>

БЛОГ НА HUSL

Как сверстать такой квадрат?

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

Для разнообразия, решение SVG

Варианты анимации

Изображение внутри уголков + анимация