Рамка-решетка для заголовка

by DelphinPRO

HTML

<h1>Заголовок любой длины</h1>

<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam sint obcaecati, aut nihil iste ipsa saepe reprehenderit necessitatibus assumenda temporibus voluptas blanditiis provident, distinctio repellat pariatur labore voluptatibus repellendus tempora!</h1>

SCSS

body {  padding: 20px; }
h1 { font-size: 32px; }

//////////

$h: 18px;
$v: 14px;
$w: 3px;
$color: #6FAE5C;

//////////

h1 {
  display: inline-block; // опционально
  position: relative;
  padding: ($v + 10px) ($h + 10px);
  margin-bottom: 0.5em;

  background:
    linear-gradient(to right, 0% transparent, $h transparent,
                    $h $color, ($h+$w) $color,
                    ($h+$w) transparent, 100% transparent),
    linear-gradient(to top, 0% transparent, $v transparent,
                    $v $color, ($v+$w) $color,
                    ($v+$w) transparent, 100% transparent)
  ;
  
  &::before, &::after {
    content: '';
    position: absolute;
    background: $color;
  }
  &::before {
    left: ($h - 10);
    right: ($h - 10);
    height: $w;
    top: $v;
  }
  &::after {
    right: $h;
    top: 0;
    bottom: 0;
    width: $w;
  }
}