创建带圆角的箭头

Question

我有这种设计，每个盒子前面都有一个斜箭头：

我使用CSS伪元素:before和:after制作了箭头 这是the code I wrote

他们这样出来了：

如您所见，设计中的箭头比实际创建的箭头更圆润。我真的不知道如何改变这一点。

有没有人有想法？

Answer 1

在CSS边框中不支持舍入，但在svg的笔触中使用以下方法支持：

stroke-linecap: round;和stroke-linejoin: round;

<svg preserveAspectRatio="none" viewBox="-1 -1 100 100">
  <polyline points="10,10 10,0 0,10" stroke-linejoin="round" stroke-width="2" stroke="red"/> 
</svg>

它的灵活性有限，但确实提供了一定的操纵性，并且可以产生较小的圆形边缘。

.slider-pagination {
  padding: 50px;
  background-color: #dedede;
}

.sld-menu-item {
  position: relative;
  float: right;
  margin: 0 0 0 13px;
  text-align: center;
  width: 106px;
  height: 85px;
  border: 3px solid #fff;
  position: relative;
  /*nicer box-shadow for webkit and mozilla. later - less nice bordershadow for IE8*/
  box-shadow: 0 2px 5px 2px rgba(0, 0, 0, 0.3);
  /*rachel's shadow*/
  -moz-box-shadow: 0 2px 5px 2px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 2px 5px 2px rgba(0, 0, 0, 0.3);
  behavior: url(/singa/wp-content/themes/singalovsky/PIE.htc);
  list-style: none;
}

.sld-menu-item span {
  background-color: #e5e5e5;
  display: inline-block;
  width: 85%;
  height: 61px;
  color: #414141;
  font-weight: bold;
  text-decoration: none;
  padding: 15px 8px 0;
  font-size: 14px;
  line-height: 16px;
  cursor: pointer;
  kit-transition: background 1s linear;
  -moz-transition-property: color, background;
  -moz-transition-duration: 0.5s, 0.5s;
  -moz-transition-timing-function: ease, ease;
  -o-transition: background 1s ease-out;
  transition: background 1s linear;
}

.sld-menu-item svg {
  position: absolute;
  top: -20px;
  right: 20px;
  z-index: 10;
  height: 20px;
  width: 20px;
}

.sld-menu-item polyline {
  stroke-linecap: round;
  stroke: #fff;
  stroke-width: 18;
  stroke-linejoin: round;
  fill: #e5e5e5;
  -webkit-filter: drop-shadow(5px 5px 4px rgba(0, 0, 0, 0.3));
  filter: drop-shadow(5px 5px 4px rgba(0, 0, 0, 0.3));
}

<ul class="slider-pagination clearfix" id="slider-pagination">
  <li onclick="slideshow.pos(0)" class="sld-menu-item sld-menu-item-1 selected">
    <span title="תחומי לימוד"></span>
    <svg preserveAspectRatio="none" viewBox="10 -20 100 100">  
      <polyline points="100,100 100,0 0,100"/>
    </svg>
  </li>
</ul>

Answer 2

尝试这个简单，以便将来支持所有浏览器http://cssarrowplease.com，实际设计外观 - 边框外（笔画 - 外/内/中），仅存在于不在css中的photoshop中，所以你不能用css完成它:) 所以我认为你应该使用Image