添加条纹文本阴影和描边

问题描述

我正尝试添加带有笔触的条纹文本阴影，就像下面的图片一样

striped text

这是我到目前为止所获得的，它很接近但不正确。我无法使其与附件中的图片完全一样

.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

解决方法

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

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

html shadow