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 - シンプルでほぼすべてのブラウザをサポートしています。

CSS ではなく Photoshop でしかできない外側の境界線 (ストローク-外側/内側/中央) を持つデザイン、

したがって、cssでそれを行うことはできません:)

したがって、Image/svg を使用する必要があると思います