html - 创建圆角箭头

Question

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

我使用 CSS 伪元素:before和:after.
这是 我写的代码

他们就这样出来了：

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

有人有想法吗？

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 - 简单而且几乎支持所有浏览器，

您的设计具有外部边框（笔画-外部/内部/中心），这只能使用 Photoshop 而不能使用 css，

因此你不能用 css 来处理它 :)

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