html - How to achieve curved top pointer

Question

Can anyone please help with this? How to achieve the attached button with CSS only(no image)?

This is my code so far:

.triangle-up {
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 50px solid #555;
}

<div class="triangle-up"></div>

Answer 1

Use pseudo element where you apply a radial-gradient:

.box {
  margin:60px 10px 0;
  display:inline-block;
  color:#fff;
  text-align:center;
  padding:10px 30px;
  background:green;
  border-radius:50px;
  position:relative;
}
.box:before {
  content:"";
  position:absolute;
  bottom:100%;
  left:50%;
  width:60px;
  height:25px;
  transform:translateX(-50%);
  background:
    radial-gradient(farthest-side at top left , transparent 98%,green 100%) left,
    radial-gradient(farthest-side at top right, transparent 98%,green 100%) right;
  background-size:50.2% 100%;
  background-repeat:no-repeat;
}

body {
 background:pink;
}

<div class="box">text here</div>

<div class="box">more and more text here</div>

<div class="box">2 lines <br>of text</div>