Question

我使用CSS创建了以下箭头，但我的箭头内侧没有圆角。有没有办法做到这一点？

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html" />


<dom-module id="custom-Element">
    <iron-ajax auto
               url="http://api.openweathermap.org/data/2.5/forecast"
               params='{"q":"California"}'
               handle-as="json"
               on-response="handleResponse"
               last-response="{{ajaxResponse}}"></iron-ajax>
    <span>{{ajaxResponse.city.name}}</span>
    <script>
        Polymer({
            is: 'custom-Element',
            handleResponse: function ()
            {
                console.log('  blalba');
            },
            ready: function () {
                setInterval(function () { console.log(this.ajaxResponse); }, 1000);

            }
        });
    </script>
</dom-module>

#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;
}

Answer 1

请尝试使用: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>

Answer 2

使用inline svg，这种形状是微不足道的 stroke-linejoin和stroke-linecap是针对您所遇到的确切问题而制作的：

＆＃13;

svg {width: 30%;}

＆＃13;

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

＆＃13;

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>

从内侧绕箭头

3 个答案: