從內側繞過箭頭

我已經使用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

從內側繞過箭頭

回答

相關問題