我有一个简单的三角形SVG,我试图弄清楚如何在CSS中部分应用边框?我怎样才能将笔划仅应用于三角形的左侧和右侧而不是顶部?
https://jsfiddle.net/rf8a9xzy/1/
<span class="svg-triangle">
<svg width="100%" viewBox="0 0 20 10">
<polygon points="0,10 20,10 10,0" />
</svg>
</span>
答案 0 :(得分:3)
您可以使用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
这就是:
.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;