Adding striped text-shadow and stroke

Question

I am trying to add a striped text shadow along with a stroke, just like the image below

This is what I've got so far, it's close but not right. I can't make it work exactly as the picture attached

 .headingStyle { background-image: -webkit-repeating-linear-gradient(60deg, #ccc, #ccc 1px, #fff 2px, #fff 3px); -webkit-background-clip: text; -webkit-text-fill-color: transparent; position:relative; text-transform: uppercase; font-weight: 700; } .headingStyle:after { background: none; content: attr(data-text); left: -.1em; position: absolute; text-shadow: 1px 1px 0px #000; top: -.05em; text-transform: uppercase; } /**/ h1 { font-size: 5em; font-family: sans-serif; margin-left: 100px;}

 <h1 class="headingStyle" data-text="UNION">UNION</h1>

Find here a working example: https://codepen.io/patie/pen/KKzWmNV

Answer 1

Here is another approximation but without transparency:

 .headingStyle { position: relative; display:inline-block; text-transform: uppercase; font-weight: 700; letter-spacing:5px; overflow:hidden; } .headingStyle:before { content: attr(data-text); left: 0; position: absolute; z-index:-1; text-shadow: 1px 1px 0px #fff, 1.3px 1.3px 0px #fff, 2px 2px 0px #000, 3px 3px 0px #000, 4px 4px 0px #000, 5px 5px 0px #000, 6px 6px 0px #000, 7px 7px 0px #000; top: 0; color:transparent; } .headingStyle:after { content:""; position:absolute; z-index:-1; top:-200vmax; left:0; right:0; bottom:-200vmax; background-image:repeating-linear-gradient(0deg, transparent 0 1px, #fff 1.5px 3px); transform:skewY(45deg); } /**/ h1 { font-size: 5em; font-family: sans-serif; margin-left: 100px;

 <h1 class="headingStyle" data-text="UNION">UNION</h1>