从内侧绕过箭头

我已经使用CSS创建了以下箭头，但是我的箭头的内侧未被圆化。有没有办法做到这一点？从内侧绕过箭头

#arrow { 
 
    border-right:30px solid black; 
 
    border-bottom:30px solid black; 
 
    width:100px; 
 
    height:100px; 
 
    transform: rotate(-45deg); 
 
    margin-top:40px; 
 
    border-radius: 1em; 
 
    -webkit-border-radius: 1em; 
 
-moz-border-radius: 1em; 
 
}

<div id="arrow"></div>

来源

2015-07-19 user3340627

您必须撰写分割块的箭头。但是这会变得越来越低效。为什么不使用内联svg标记呢？或者一个字体很棒的字形？ – arkascha

@arkascha非常感谢建议字体真棒，虽然下面的答案解决了这个问题，我发现字体真棒是一个更方便和更容易的选择。 – user3340627

尝试使用:before和:after选择来代替。小提琴：http://jsfiddle.net/gopal/tvfujcLp/1/

#arrow { 
 
    width:130px; 
 
    height:130px; 
 
    transform: rotate(-45deg); 
 
    margin-top:40px; 
 
    position:relative; 
 
} 
 

 
#arrow:after, #arrow:before { 
 
    content:''; 
 
    display:block; 
 
    height:30px; 
 
    width:100%; 
 
    position:absolute; 
 
    background:black; 
 
    bottom:0; 
 
    border-radius:1em; 
 
} 
 
#arrow:after { 
 
    right:0; 
 
    width:30px; 
 
    height:100%; 
 
}

<div id="arrow"></div>

来源

2015-07-19 08:56:23 gopalraju

随着inline svg，这种形状是微不足道使。
的stroke-linejoin和stroke-linecap是你有确切的问题提出：

svg {width: 30%;}

<svg viewbox="0 0 7 10" xmlns="http://www.w3.org/2000/svg" > 
 
    <polyline points="1 1 5 5 1 9" 
 
      fill="none" stroke-width="1.5" stroke="#000" 
 
      stroke-linejoin="round" stroke-linecap="round" /> 
 
</svg>

来源

2015-07-19 09:21:13

![enter image description here][1] 
<style> 
    #arrow { 
     border-right: 30px solid black; 
     border-bottom: 30px solid black; 
     width: 100px; 
     height: 100px; 
     transform: rotate(135deg); 
     margin-top: 40px; 
     border-radius: 1em; 
     -webkit-border-radius: 1em; 
     -moz-border-radius: 1em; 
     margin-left: 20px; 
    } 
</style> 
<div id="arrow"></div>

来源

2015-07-19 09:44:48

我在JSFiddle上试过这个，但结果仍然如此： http://jsfiddle.net/a0uogod0/148/ – user3340627

从内侧绕过箭头

回答

相关问题