html - 如何实现弧形顶部指针

Question

有人可以帮忙吗？如何仅使用 CSS 实现附加按钮(无图像)？

到目前为止，这是我的代码:

.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

在应用径向渐变的地方使用伪元素:

.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>

另一个想法，如果你想要任何一种颜色:

.box {
  margin:60px 10px 0;
  display:inline-block;
  color:#fff;
  text-align:center;
  padding:10px 30px;
  background-image:linear-gradient(60deg,yellow,purple,green,blue);
  background-size:100% calc(100% + 25px);
  background-position:bottom;
  border-radius:50px;
  position:relative;
  z-index:0;
}
.box:before {
  content:"";
  position:absolute;
  z-index:-1;
  bottom:0;
  left:0;
  right:0;
  height:calc(100% + 25px);
  background-image:inherit;
  -webkit-mask:
    radial-gradient(farthest-side at top left , transparent 98%,#fff 100%) left,
    radial-gradient(farthest-side at top right, transparent 98%,#fff 100%) right;
  mask:
    radial-gradient(farthest-side at top left , transparent 98%,#fff 100%) left,
    radial-gradient(farthest-side at top right, transparent 98%,#fff 100%) right;
  -webkit-mask-size:30px 25px;
  mask-size:30px 25px;
  -webkit-mask-position:calc(50% - 15px) 0,calc(50% + 15px) 0;
  mask-position:calc(50% - 15px) 0,calc(50% + 15px) 0;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}

body {
 background:pink;
}

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

<div class="box" style="
  background-image:linear-gradient(160deg,white,red,black,orange);">more and more text here</div>

<div class="box" style="
  background-image:linear-gradient(180deg,blue 20%,violet 20%,black);">2 lines <br>of text</div>