ブロックの四隅のスタイリング

Question

この最初のイメージのようにブロックのコーナーをスタイルする必要がありました。

私は前に::使用して、余分なインナーブロックの助けを借りてそれをやったし、::の両方のブロックのafter疑似要素：

<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>