Одним тегом с псевдоэлементами
.headline {
margin: 0;
position: relative;
overflow: hidden;
text-align: center;
}
.headline:before,
.headline:after {
content: "";
position: relative;
display: inline-block;
vertical-align: middle;
width: 100%;
height: 30px;
background-size:
100% 1px,
30px 30px;
}
.headline:before {
right: .5em;
margin-left: -100%;
background:
linear-gradient(90deg, #000, #000) repeat-x center,
radial-gradient(10px, #000 0%, #000 100%, rgba(0,0,0,.0) 100%) no-repeat right -5px center;
background-size:
100% 1px,
30px 30px;
}
.headline:after {
left: .5em;
margin-right: -100%;
background:
linear-gradient(90deg, #000, #000) repeat-x center,
radial-gradient(10px, #000 0%, #000 100%, rgba(0,0,0,.0) 100%) no-repeat left -5px center;
background-size:
100% 1px,
30px 30px;
}
jsbin.com/jibujeluja/1/edit