<div class="box-stripe">ストライプの枠のボックス</div>
.box-stripe{
padding: 20px 25px;
position: relative;
&:before{
content: "";
position: absolute;
top: 5px;
bottom: 5px;
left: 5px;
right: 5px;
background: #fff;
z-index: -1;
}
&:after{
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: repeating-linear-gradient(-45deg, #fff, #fff 3px, #94c7b4 0, #94c7b4 6px);
z-index: -2;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.