Bueno, para crear una figura de chat con html y CSS primero debes saber de que se tratará el mensaje.
Haz un borrador de lo que el mensaje será y ponlo en un archivo html básico (en mi caso usé div y p para diferenciar entre la figura y el texto.
Luego establecer en el archivo CSS los estilos que te gusten más (color de fondo, tamaño de letra, bordes, margenes, etc.).
Para darle el formato de chat puedes hacer bordes suaves con border-radius en 3 lados y en uno no. Así quedará como una burbuja de chat básica.
Recuerda jugar con la orientación del texto para distinguir los usuarios que interactúan.
El display que más se adecua a un chat sería el block.
"en">
"UTF-8">
"viewport"content="width=device-width, initial-scale=1.0">
<title>Chat entre amigostitle>
<style>html{
font-size: 62.5%;
}
body#elo{
display: inline-block;
}
div.hola {
width: 50vw;
height: 7.5vh;
background-color: rgb(14, 221, 221);
font-size: medium;
font-weight: 900;
border-top-left-radius: 2.5rem;
border-top-right-radius: 2.5rem;
border-bottom-right-radius: 2.5rem;
border-style: solid;
border-width: thick;
border-color: rgba(70, 197, 197, 0.775);
}
p.hijo0 {
width: 40vw;
height: 7.5vh;
line-height: 1vh;
text-align: left;
margin-left: 3vw;
position: relative;
}
div.resp1 {
width: 50vw;
height: 7.5vh;
background-color: rgb(14, 221, 221);
font-size: medium;
font-weight: 900;
border-top-left-radius: 2.5rem;
border-top-right-radius: 2.5rem;
border-bottom-left-radius: 2.5rem;
border-style: solid;
border-width: thick;
border-color: rgba(70, 197, 197, 0.775);
margin-top: 1rem;
position: relative;
}
p.hijo1 {
width: 40vw;
height: 3.6rem;
text-align: right;
margin-block-end:0%;
margin-block-start:1rem;
position: relative;
margin-left: 7.5vw;
}
div.hola1 {
width: 50vw;
height: 7.5vh;
background-color: rgb(14, 221, 221);
font-size: medium;
font-weight: 900;
border-top-left-radius: 2.5rem;
border-top-right-radius: 2.5rem;
border-bottom-right-radius: 2.5rem;
border-style: solid;
border-width: thick;
border-color: rgba(70, 197, 197, 0.775);
margin-top: 1rem;
}
p.hijo2 {
width: 40vw;
height: 3.6rem;
text-align: left;
margin-block-end:0%;
margin-block-start:1rem;
position: relative;
margin-left: 3vw;
}
div.resp2 {
width: 50vw;
height: 7.5vh;
background-color: rgb(14, 221, 221);
font-size:medium;
font-weight: 900;
border-top-left-radius: 2.5rem;
border-top-right-radius: 2.5rem;
border-bottom-left-radius: 2.5rem;
border-style: solid;
border-width: thick;
border-color: rgba(70, 197, 197, 0.775);
margin-top: 1rem;
position: relative;
}
p.hijo3 {
width: 40vw;
height: 3.6rem;
text-align: right;
margin-block-end:0%;
margin-block-start:1rem;
position: relative;
margin-left: 7.5vw;
}
div.hola2 {
width: 50vw;
height: 17vh;
background-color: rgb(14, 221, 221);
font-size: medium;
font-weight: 900;
border-top-left-radius: 2.5rem;
border-top-right-radius: 2.5rem;
border-bottom-right-radius: 2.5rem;
border-style: solid;
border-width: thick;
border-color: rgba(70, 197, 197, 0.775);
margin-top: 1rem;
}
p.hijo4 {
width: 40vw;
height: 30vh;
line-height: 3vh;
text-align: left;
margin-left: 3.5vw;
position: relative;
}
div.resp3 {
width: 50vw;
height: 13vh;
background-color: rgb(14, 221, 221);
font-size:medium;
font-weight: 900;
border-top-left-radius: 2.5rem;
border-top-right-radius: 2.5rem;
border-bottom-left-radius: 2.5rem;
border-style: solid;
border-width: thick;
border-color: rgba(70, 197, 197, 0.775);
margin-top: 1rem;
position: relative;
}
p.hijo5 {
width: 45vw;
height: 20vh;
text-align: right;
line-height: 3vh;
margin-block-end:2rem;
margin-block-start:1rem;
margin-left: 0vw;
}
style>
head>
"elo">
"hola">
"hijo0">Holap>
div>
"resp1">
"hijo1">Hola !🤪💥p>
div>
"hola1">
"hijo2">¿Cómoestás?p>
div>
"resp2">
"hijo3">Bienytu?p>
div>
"hola2">
"hijo4">Bientambiéngracias,
ahoraestoyaprendiendoHTMLyCSSenPlatzip>
div>
"resp3">
"hijo5">¿Enserio? Quegenial,
yotambienquieroapenderp>
body>
html>```
