如何实现弧形顶部指针

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>

Answer 2

一种选择是创建一个普通矩形，然后在其上放置两个圆圈，从而创建一个弯曲点。

在下面的演示中，这个矩形由 .point div 表示，圆由伪元素 ::before 和 ::after 表示。

.caption {
  position: relative;
  width: 350px;
 margin-top: 40px;
}

.caption>.content {
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 30px;
  background-color: green;
  color: white;
  text-align: center;
}

.caption>.point {
  position: absolute;
  left: 50%;
  top: -30px;
  width: 30%;
  height: 30px;
  transform: translateX(-50%) translateZ(1px);
  overflow: hidden;
  background-color: green;
}

.caption>.point::before,
.caption>.point::after {
  content: '';
  display: block;
  width: 100%;
  height: 200%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 100%;
  background-color: white;
}

.caption>.point::before {
  transform: translateX(-49%) translateY(-50%);
}

.caption>.point::after {
  transform: translateX(49%) translateY(-50%);
}

<div class="caption">
  <div class="point"></div>
  <div class="content">This is some text!</div>
</div>

这里更直观地演示了代码的实际作用。 ::before 和 ::after 元素由红色圆圈表示。我已将填充的透明度降低到 50%，这样您就可以看到 .point div 的哪一部分被切断了。

.caption {
  position: relative;
  width: 350px;
 margin-top: 40px;
}

.caption>.content {
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 30px;
  background-color: green;
  color: white;
  text-align: center;
}

.caption>.point {
  position: absolute;
  left: 50%;
  top: -30px;
  width: 30%;
  height: 30px;
  transform: translateX(-50%) translateZ(1px);
  background-color: green;
}

.caption>.point::before,
.caption>.point::after {
  content: '';
  display: block;
  width: 100%;
  height: 200%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 100%;
  background-color: rgba(255,255,255,0.5);
  border: 1px solid red;
}

.caption>.point::before {
  transform: translateX(-49%) translateY(-50%);
}

.caption>.point::after {
  transform: translateX(49%) translateY(-50%);
}

<div class="caption">
  <div class="point"></div>
  <div class="content">This is some text!</div>
</div>

Answer 3

你可以在两个圆形的假体上使用阴影

.bubble {
  position: relative;
  background: #00aabb;
  border-radius: 0.4em;
  width: 200px;
  height: 100px;
}

.bubble:after,
.bubble:before {
  content: "";
  position: absolute;
  height: 3em;
  width: 3em;
  border-radius: 50%;
  top: 100%;
  margin: -1px;
}

:after {
  left: 50%;
  box-shadow: -0.8em -1.4em 0 -0.5em #00aabb
}

:before {
  right: 50%;
  box-shadow: 0.8em -1.4em 0 -0.5em #00aabb;
}

<div class='bubble'></div>

要了解它的工作原理，请为伪色提供背景，为阴影提供另一种颜色。您将能够复制侧面或顶部。这是圆的大小和阴影的大小和方向的问题。

如何实现弧形顶部指针

How to achieve curved top pointer

html

css

css-shapes