g1un g1un - 6 months ago 51
CSS Question

Styling 4 corners of block

I had to style block corners as in this first image.

image1

I did it with help of extra inner block, using ::before and ::after pseudo-elements of both blocks:

<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

Are there any better ways to style it using only css, without extra blocks, images, other auxiliary things? Just pure css.

Thanks.

Answer

You could use multiple gradient background-images:

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>