Как добиться изогнутого верхнего указателя

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

вы можете использовать тень на обоих закругленных псевдо

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

Используйте псевдоэлемент, где вы применяете радиальный градиент:

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

Один из вариантов - создать нормальный прямоугольник, а затем расположить над ним два круга, чтобы они создали изогнутую точку.

В демонстрационном примере ниже этот прямоугольник представлен элементом .point, икруги представлены псевдоэлементами ::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>