如何实现曲顶指针

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

您可以在两个圆形伪影上使用阴影

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

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

Answer 3

一种选择是创建一个普通矩形，然后 position 在它上面画两个圆圈，这样它们就创建了一个曲线点。

在下面的演示中，这个矩形由.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>