[Duda] Resuelto | Texto dentro de figura creada con CSS

Sáb Sep 28, 2019 2:02 pm

Vuelvo a dejarme caer por aquí con una duda que me ha surgido intentando seguir un tutorial, concretamente este de Roshio. Crear las figuras ha sido sencillo, pero al intentar poner texto dentro, no soy capaz, por ejemplo en esta figura:

Texto

El texto queda fuera y no entiendo cómo se puede poner dentro como en un div como este:

Texto

Sospecho que es por la propiedad "border", pero entonces no sé cómo podía hacerlo para lograr un div rectangular con uno de los extremos acabando en diagonal en vez de recto. Tal que así (ejemplo simple a más no poder hecho con paint):
[Duda] Resuelto | Texto dentro de figura creada con CSS Captura

Sáb Sep 28, 2019 7:36 pm

¡Hola! Meto un poquito las narices aquí a pesar de ser novata y saber muy poco, pero a lo mejor ayudo de algo (?). Creo que se consigue haciendo primero el rectángulo con el texto (ya que es el background del div donde va el texto) y luego haciendo un cuadrado (o rectángulo idk depende de la inclinación ??) justo al lado del mismo color y a este se le da el borde en diagonal. Y después supongo que es cuestión de poner la otra figura al lado con el otro color (es como lo del talkbubble que tiene dos cositas, primer la burbuja y luego el triángulito). ¡Qué me corrijan los maestros si me equivoco pls!

EDITO (porque soy ravenclaw y no me quedo solo en la teoría): He probado a hacerlo yo misma y me ha salido xD
[Duda] Resuelto | Texto dentro de figura creada con CSS DpiPhCr

[Duda] Resuelto | Texto dentro de figura creada con CSS DpiPhCr

Para la figura, hay que jugar un poco con el margin y cuadrarlo justo con el div del texto. Seguro que hay una forma más fácil de hacerlo pero a mí me ha dado resultado xDDD

Mar Oct 01, 2019 4:31 am

¡Gracias Rosmerta! La verdad es que es una solución fácil pero no había caído en ella [Duda] Resuelto | Texto dentro de figura creada con CSS 1f605

. No obstante, se me presenta otro problema y es al poner el div en el otro lado:

[Duda] Resuelto | Texto dentro de figura creada con CSS Captura

Como se ve donde señala la "flecha" (está claro que dibujar no es lo mio jaja) hay como un pequeño descuadre que no sé cómo arreglar. El código que he creado es este:

Código:: <table class="tg"> <tr> <td class="tg-cly1"><div style="width: 300px; height: 120px; padding: 5px; background: #9c2a34; text-transform: uppercase; color: #FFF; font-size: 20px; font-family: calibri; text-align: center;">Hola</div></td> <td class="tg-0lax"><div class="polygon2"></td> <td class="tg-0lax"><div style="width: 300px; height: 120px; padding: 5px; background: #000; text-transform: uppercase; color: #FFF; font-size: 20px; font-family: calibri; text-align: center; margin-left: -90px;"></div></td> </tr> </table>

Código:: .polygon2 { clip-path: polygon(80% 0, 36% 100%, 0% 100%, 0% 0%); width: 120px; background: #9c2a34; height: 120px; padding: 5px; margin-left: -5px;}

Mar Oct 01, 2019 11:45 am

¿Puede que sea cosa del zoom? Porque a mí con 175% de zoom sí me sale, pero si lo pongo a 200% ya no xd. Incluso teniéndolo al 100% no sale ( y si sale mis ojos no son capaces de percibirlo).

[Duda] Resuelto | Texto dentro de figura creada con CSS PmHZt36

[Duda] Resuelto | Texto dentro de figura creada con CSS PmHZt36

[Duda] Resuelto | Texto dentro de figura creada con CSS YefVgyW

¿A ti te sale siempre? :/

Mar Oct 01, 2019 8:22 pm

¡Hola hola!

De antemano gracias a Rosmerta por su aportación en ayudarnos con esta duda [Duda] Resuelto | Texto dentro de figura creada con CSS 500425761

[Duda] Resuelto | Texto dentro de figura creada con CSS 500425761

-le da montones de love-

Y bueno yo probé el codigo en JSFiddle y me sale todo normal, ninguna raya abajo (?

No sé bien cuál sea el problema quizás por la tabla te este arrojando asi el efectito del clip-path.

Jue Oct 03, 2019 7:24 am

Muchas gracias a ambas <3

Puede que sí sea cosas del zoom o del propio code pen, que es cierto que hay codes que al pasarlos a FA tengo que editarlos un poco porque no salen exactamente igual. ¡Muchas gracias por la ayuda de verdad!

Elementos

Dragon Ball

Pronto

Paraíso Personal

Amor y Amistad

Conejo de Pascua

[Duda] Resuelto | Texto dentro de figura creada con CSS