圆角三角形右边框CSS

Question

如何创建带有圆角顶点的三角形？以前，我使用:: after伪元素创建了一个正方形，并将其旋转，看起来很像romb，然后将其裁剪，因为我没有得到预期的结果。

* {
  box-sizing: border-box
}
.price{
  width: 150px;
  height: 50px;
  background: #2d2d2d;
  color:#fff;
  align-items: center;
  display: flex;
  }
  
  .icon{
    font-size: 50px;
  }
  
  .items{
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 6px 0;
    justify-content:space-between
  }

<div class="price">
  <span class="icon">P</span>
  <div class="items">
    <span class="title">Total</span>
    <span class="value">6 250</span>
  </div>
</div>

Answer 1

您可以为arrow添加新的div并为其应用CSS。

请参见下面的代码段

* {
  box-sizing: border-box
}
.price{
  width: 100px;
  height: 50px;
  background: #2d2d2d;
  color:#fff;
  align-items: center;
  display: flex;
  position:relative;
  }
  
  .icon{
    font-size: 50px;
  }
  
  .items{
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 6px 0;
    justify-content:space-between
  }
  
.arrow {
    position: absolute;
    background-color: #2d2d2d;
    text-align: left;
    top: 4px;
    right: -23px;
    transform: rotate(-90deg) skewX(-30deg) scale(1,.866);
}

.arrow:before,
.arrow:after {
    content: '';
    position: absolute;
    background-color: inherit;
}

.arrow,
.arrow:before,
.arrow:after {
    width: 28px;
    height: 28px;
    border-top-right-radius: 30%;
}
.arrow:before {
    transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);
}

.arrow:after {
  transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);
}

<div class="price">
  <span class="icon">P</span>
  <div class="items">
    <span class="title">Total</span>
    <span class="value">6 250</span>
  </div>
<div class="arrow">
</div>
</div>