CSS中的条纹三角形

Question

我正在尝试在CSS中编写条纹三角形，这将是一个调整大小的图标，您通常可以在这样的窗口的右下角找到该图标：

我尝试过使用repeating-linear-gradient并使用div-border技巧创建一个三角形，但是由于三角形是由边界组成的，并且渐变是用于背景的，因此我无法将它们组合在一起。

那么我如何获得一个看起来像图像的div？我在Google或stackoverflow上找不到任何有用的东西。

我们非常感谢您的帮助：）

Answer 1

我会在伪元素上使用框阴影创建3条，并将其旋转到右下角

.strip_tri {
  width: 20px;
  height: 20px;
  position: relative;
  overflow: hidden;
}

.strip_tri::after {
  content: '';
  position: absolute;
  display: block;
  width: 50px;
  height: 0;
  box-shadow: 0 10px 0 1px black, 0 17px 0 1px black, 0 24px 0 1px black;
  transform: translate(-50%, -50%) rotate(-45deg) scale(0.5);
  top: 50%;
  left: 50%;
}

<div class="strip_tri"></div>

Answer 2

我用您提供的链接来做到这一点：

#a {
  background: repeating-linear-gradient( -45deg, #fff, #fff 2px, #000 2px, #000 3px);
  width: 20px; 
  height: 20px;
}

#b {
  width: 0;
  height: 0;
  border-right: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-top: 25px solid #fff;
  
}

<div id="a">
<div id="b">
</div>
</div>

当然，您可以根据需要更改div和条纹的大小。