从内侧绕箭头

Question

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

Answer 1

请尝试使用 :before 和 :after 选择器。 Fiddle: 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>

Answer 2

有了 inline svg，这个形状很容易制作。
stroke-linejoin and 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>

Answer 3

   ![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>

从内侧绕箭头

Round the arrow from inner side

html

css

css-shapes