Question

我有一个简单的三角形SVG，我试图弄清楚如何在CSS中部分应用边框？我怎样才能将笔划仅应用于三角形的左侧和右侧而不是顶部？

<span class="svg-triangle">             
  <svg width="100%" viewBox="0 0 20 10">
    <polygon points="0,10 20,10 10,0" />
  </svg>
</span>

Answer 1

您可以使用stroke-dasharray设置要绘制的笔划部分。

Dasharrays由一对或多对数字组成，描述要绘制的长度，然后是要跳过的长度。它始终以绘制的长度开始。所以＆＃34; 10 5＆＃34;的dasharray表示绘制长度为10的笔划部分，然后是长度为5的间隙。然后重复。画出另外10和5等差距。

你的三角形从一条长度为20的水平线开始，然后是两条45度的线（10,10）。其他两边的长度是14.142 - 使用毕达哥拉斯＆＃39;定理：sqrt（10 ^ 2 + 10 ^ 2）。

因此需要绘制双方的破折号数组：

0 20 28.284

这就是：

画一个0，
20的间隙（三角形的水平部分）
画出另外两面（14.142 * 2）

＆＃13;

.svg-triangle {
  display: block;
  width: 100px;
  transform: rotate(180deg);
}

.svg-triangle svg {
  fill: #FFF;
  stroke: #000;
  stroke-width: 1px;
  stroke-opacity: 0.2;
}

.svg-triangle svg polygon{
  stroke-dasharray: 0 20 28.284;
}

＆＃13;

<span class="svg-triangle">             

  <svg width="100%" viewBox="0 0 20 10">
    <polygon points="0,10 20,10 10,0" />
  </svg>

</span>

＆＃13;

SVG - 部分抚摸三角形

1 个答案: