Rounded triangle right border css

Question

How can I create a triangle with rounded vertices? Previously, I've created a square with the ::after pseudo element and rotated it, which looked like romb and then clipped it because I didn't get the expected result.

* {
  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>

Can you make use of this? https://stackoverflow.com/questions/14446677/how-to-make-3-corner-rounded-triangle-in-css — m4n0, Jul 25 '19 at 14:09
@paulie-d actualy it won't work cuz i have custom dimention and answers in example can't fit. — Khujand Nanocoding, Jul 25 '19 at 14:30

score 2 · Accepted Answer · answered Jul 25 '19 at 14:50

You can add new div for arrow and apply the CSS for it..

See the Snippet below:

* {
  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>

I was working on solution before Marked the question as Duplicate.. So I was able to post it :D — Nimitt Shah, Jul 25 '19 at 14:55

Rounded triangle right border css

1 Answers1