创建带有圆角的箭头

Question

我有这个设计，在每个框之前都有一个倾斜的箭头：

我使用CSS伪元素:before和:after制作了箭头。
这是我编写的代码。

它们的效果如下图所示：

你可以看到，设计中的箭头比实际创建的箭头更加圆润一些。我不太知道如何改变这个。

有人有想法吗？

- Lea Cohen

---

相当确定这是不可能完成的。你可以将 border-radius 应用于箭头底部，但这与你想要的相反。为什么不使用图片呢？ - Jezen Thomas

@JezenThomas，我在想是否可以不用图片实现。我宁愿使用 CSS 而非图片。 - Lea Cohen

为什么要让简单的任务变得更加复杂呢？这样做并不能为你带来额外的奖励分数。即使这个任务能够被凑合出来，它在不同的浏览器上的可维护性又如何呢？ - Jezen Thomas

@JezenThomas，我不是在寻找一个hack。我只是想确保我没有忽略任何解决方案... - Lea Cohen

你可以使用SVG路径代替。 - iLuvLogix

你最好的选择是使用带有一些文本元素的SVG元素。 - Adriano

Answer 1

在 CSS 边框中不支持圆角，但在 SVG 路径中可以通过以下方式实现： stroke-linecap: round; 和 stroke-linejoin: round;。将这两个属性设置为“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>

- DreamTeK

Answer 2

试试这个http://cssarrowplease.com - 简单而且几乎支持所有浏览器，

你的设计拥有外部边框（描边-外部/内部/中心），这只能用 Photoshop 而不能用 css 实现，

因此你不能用 css 实现它 :)

所以我认为你应该使用 Image/svg

- Chandrakant