¿Alguien puede ayudarme con esto? ¿Cómo lograr el botón adjunto solo con CSS (sin imagen)?

Curved-Pointer Button

Este es mi código hasta ahora:

.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>
0
Max 2 oct. 2019 a las 21:05

3 respuestas

La mejor respuesta

Una opción es crear un rectángulo normal y luego colocar dos círculos sobre él, de modo que creen un punto curvo.

En la demostración a continuación, este rectángulo está representado por el div .point, y los círculos están representados por los pseudo-elementos ::before y ::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>

Aquí hay una demostración más visual de lo que el código está haciendo realmente. Los elementos ::before y ::after están representados por los círculos rojos. Reduje la transparencia de su relleno a 50% para que pueda ver qué parte de la división .point están cortando.

.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>
0
Tyler Roper 2 oct. 2019 a las 19:30

Utilice el pseudo elemento donde aplique un degradado radial:

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

enter image description here

Otra idea en caso de que desee algún tipo de coloración:

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

enter image description here

1
Temani Afif 2 oct. 2019 a las 22:24

Puedes usar la sombra en ambos pseudos redondeados

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

Para entender cómo funciona, dé un fondo al pseudo y otro color a las sombras. Podrás reproducir para los lados o la parte superior. Se trata del tamaño del círculo y del tamaño y dirección de la sombra.

1
G-Cyrillus 3 oct. 2019 a las 19:57