添加条纹文本阴影和描边

Question

我正在尝试在笔划的同时添加条纹文本阴影，就像下图一样

这是我到目前为止所得到的，它很接近但不正确。我无法让它完全按照所附图片工作

.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>

在这里找到一个工作示例：https://codepen.io/patie/pen/KKzWmNV

Answer 1

这是另一个近似值，但没有透明度：

.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>