Стилирование 4 углов блока

Question

Мне приходилось стилизовывать углы блока, как в этом первом изображении.

Я сделал это с помощью дополнительного внутреннего блока, используя :: до и после :: псевдо-элементов обоих блоков:

<div class="header__text"> 
    <p> 
    Lorem ipsum 
    </p> 
</div> 

.header__text { 
    display: inline-block; 
    vertical-align: top; 
    margin: 0 auto; 
    position: relative; 
} 

.header__text::before { 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 12px; 
    height: 12px; 
    border-top: 1px solid rgba(0, 0, 0, 1); 
    border-left: 1px solid rgba(0, 0, 0, 1); 
} 

.header__text::after { 
    content: ''; 
    position: absolute; 
    top: 0; 
    right: 0; 
    width: 12px; 
    height: 12px; 
    border-top: 1px solid rgba(0, 0, 0, 1); 
    border-right: 1px solid rgba(0, 0, 0, 1); 
} 

.header__text p { 
    margin: 0; 
    padding: 10px 20px; 
    font-family: Arial, sans-serif; 
    font-size: 21px; 
    line-height: 1.2em; 
    font-weight: 400; 
    color: #000; 
    text-transform: none; 
    text-decoration: none; 
    letter-spacing: .07em; 
    text-align: center; 
    position: relative; 
} 

.header__text p::before { 
    content: ''; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 12px; 
    height: 12px; 
    border-bottom: 1px solid rgba(0, 0, 0, 1); 
    border-left: 1px solid rgba(0, 0, 0, 1); 
} 

.header__text p::after { 
    content: ''; 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    width: 12px; 
    height: 12px; 
    border-bottom: 1px solid rgba(0, 0, 0, 1); 
    border-right: 1px solid rgba(0, 0, 0, 1); 
} 

jsbin link

Есть ли какие-либо лучшие способы стилизовать его, используя только css, без дополнительных блоков, изображений, других вспомогательных вещей? Просто чистый css.

Спасибо.

Answer 1

Вы можете использовать несколько градиентных фоновых изображений:

div { 
 
    display: inline-block; 
 
    background-image: 
 
    linear-gradient(90deg, black 12px, transparent 12px, transparent calc(100% - 12px), black calc(100% - 12px)), 
 
    linear-gradient(90deg, black 12px, transparent 12px, transparent calc(100% - 12px), black calc(100% - 12px)), 
 
    linear-gradient(black 12px, transparent 12px, transparent calc(100% - 12px), black calc(100% - 12px)), 
 
    linear-gradient(black 12px, transparent 12px, transparent calc(100% - 12px), black calc(100% - 12px)); 
 
    background-size: 100% 1px, 100% 1px, 1px 100%, 1px 100%; 
 
    background-repeat: no-repeat; 
 
    background-position: 0 0, 0 100%, 0 0, 100% 0; 
 
} 
 

 
p { 
 
    margin: 0; 
 
    padding: 10px 20px; 
 
}

<div><p>Lorem Ipsum</p></div>