如何实现弯曲的顶部指针 [英] How to achieve curved top pointer

问题描述

有人可以帮忙吗？如何仅使用CSS（没有图像）实现附加的按钮？

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>

推荐答案

一种选择是创建一个普通矩形，然后在其上放置两个圆，以使它们创建一个弯曲点。

One option is to create a normal rectangle and then position two circles over it, such that they create a curved point.

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

In the demo below, this rectangle is represented by the .point div, and the circles are represented by the pseudo-elements ::before and ::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的哪一部分

Here is a more visual demonstration of what the code is actually doing. The ::before and ::after elements are represented by the red circles. I've reduced the transparency of their fill to 50% so you can see which portion of the .point div they're cutting off.

>

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

这篇关于如何实现弯曲的顶部指针的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！