How to make a div pointing like a chat bubble

Question

How to make a div pointing like a chat bubble

Navigation

#1 by (2 votes)

1

I have the following question about how to make a pointing div NOTE : I mean only one not with two div because that is what I do here I leave you an image of what I want and a bit of code

this is what I want to achieve this is what I have

#triangle{

 width: 250px;
  height:250px;
  background-image:url(avatar.png);
background:black;
}
.triangulo {
position:absolute;
  width: 0;
  height: 0;
  border-right: 60px solid transparent;
  border-left: 60px solid transparent;
  border-bottom: 60px solid transparent;
  border-top: 60px solid black;
margin-top:250px;
margin-left:65px;
}

<div id="triangle">

 <div class="triangulo"></div>
</div>

How do you see what I would like to do with a single div and thus put a background image on the div so that it looks like in the photo, some idea or tips to achieve this?

html css

asked by andy gibbs 03.08.2018 в 21:13

source

1 answer

disable and enable "buttons" of the "a" tag Identify checkbox by clicking

score 2 · Accepted Answer

Hi, I'll give you two ideas on how to do it:

Use before and after to create two items below with that form.

Use the CSS property clip-path

Option 1:

Recommendations with this option:

The color of the pseudo elements must be the same as the next element.
If you know how to use variables, you can use the same variable for the pseudo elements and the background color of the next element.

*{
  box-sizing: border-box;
  padding: 0;
  font-family: arial, sans-serif;
}

div{
  font-size: 2em;
  background-color: dimgray;
  background-image: url('http://picsum.photos/800/600/?=random');
  background-size: cover;
  min-height: 80vh;
  color: white;
  text-align: center;
  overflow: hidden;
  line-height: 50vh; /*ignora esta linea, es para centrar el texto, pero no es lo mejor*/
  position: relative;
}

div::before,
div::after{
  content: '';
  position: absolute;
  bottom: 0;
  height: 2em;
  width: calc(50% + 2em);
  background: lightcyan; /*El mismo color de fondo que el siguiente elemento*/
}

div::before{
  left: -2em;
  transform: skew(45deg);
}

div::after{
  right: -2em;
  transform: skew(-45deg);
}

article{
  background: lightcyan;
  padding: 1em;
}

<div>
  texto de prueba
</div>
<article>
  otro elemento
</article>

Option 2

Recommendations with this option:

The other option is a bit more advanced since the clip path property must be combined with the calc function and css variables.
In addition to using margin so that the next element does not stick to the previous one.
It is a complicated option, but allows you to use the pseudo elements of the container in other things, such as the arrow that has the image of the example, among other things.
Another benefit is that the triangle and its size is modified perfectly with a measure that you declare in the body (or in the parent container of the background with the triangle), that way although the configuration is tedious, the modifications later they are faster, because when you want to change the size of this, you only have to do it in one place and not in several.

*{
  box-sizing: border-box;
  padding: 0;
  font-family: arial, sans-serif;
}

body{
  --h: 4rem;
}

div{
  font-size: 2em;
  background-color: dimgray;
  background-image: url('http://picsum.photos/800/600/?=random');
  background-size: cover;
  min-height: 80vh;
  color: white;
  text-align: center;
  overflow: hidden;
  line-height: 50vh; /*ignora esta linea, es para centrar el texto, pero no es lo mejor*/
  position: relative;
  clip-path: 
    polygon(     
      0% 0%, 
      0% calc(100% - var(--h)),     
      calc(50% - var(--h)) calc(100% - var(--h)),     
      50% 100%,     
      calc(50% + var(--h)) calc(100% - var(--h)),     
      100% calc(100% - var(--h)),     
      100% 0%);
  margin-bottom: calc( var(--h) * -1 )
}

article{
  background: lightcyan;
  --y: 1em;
  padding: var(--y);
  padding-top: calc(var(--h) + var(--y));
}

/*Lo siguiente es para crear la flecha del banner*/

div::before{
  content: '';
  width: calc(var(--h) / 1.5) ;
  height: calc(var(--h) / 1.5);
  position: absolute;
  left: 50%;
  bottom: calc(var(--h) / 1.5);
  transform: 
    translateX(-50%)
    rotateZ(45deg);
  box-shadow: 0.1em 0.1em 0 0 white;
}

<div>
  texto de prueba
</div>
<article>
  otro elemento
</article>