Live
x
<svg width="250" height="250" viewBox="-50 -50 300 300"> <polygon class="triangle demo" stroke-linejoin="round" points="100,0 0,200 200,200"/></svg><svg width="250" height="250" viewBox="-50 -50 300 300"> <polygon class="triangle" stroke-linejoin="round" points="100,0 0,200 200,200"/></svg><!-- 可以通过 stroke-width 控制圆角大小--><svg width="230" height="230" viewBox="-50 -50 300 300"> <polygon class="triangle radius" stroke-linejoin="round" points="100,0 0,200 200,200"/></svg><svg width="200" height="200" viewBox="-50 -50 300 300"> <polygon class="triangle radius2" stroke-linejoin="round" points="100,0 0,200 200,200"/></svg>
Live
xxxxxxxxxx28
html, body { width: 100%; height: 100%; display: flex;}svg { margin: auto;}.triangle { fill: #0f0; stroke: #0f0; stroke-width: 10;}.demo { stroke: #000;}// 可以通过 stroke-width 控制圆角大小.radius { stroke-width: 30;}.radius2 { stroke-width: 60;}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.