diagonal lines sample

by hondana

HTML

<div style="padding:10px; background:#F7A87F">見出しに使ってみる</div>
<div class="midashi-decoration"></div>

CSS

.midashi-decoration {
  position: relative;
  padding: 5px;
  background: #F7A87F;
}

.midashi-decoration:after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 14px;
content: '';
background: repeating-linear-gradient( -45deg, #F7A87F, #F7A87F 2px, #fff 0, #fff 7px );
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}