0

Hola Tengo 2 problema soy nuevo en esto y estaba pensando en hacer unas figuras con divs:

  1. Al escribir dentro de los divs mas de 7 líneas se me empieza a desarmar absolutamente todo esto pasa en la parte de naranja y en la parte ploma
  2. Quiero crear una clase que se llame textTitulo que si se lo pongo a una span quede en negritas y mayúsculas pero al momento de separar los span quedan uno al lado del otro y la idea es que el titulo quede arriba y el resto debajo de el titulo

Para dar un ejemplo del problema 1 :

Imagen al problema 1

Para dar un ejemplo del problema 2 :

Imagen al problema 2

mi codigo Css:

:root{
            --color1: rgb(241, 107, 82);
            --color2: rgb(255, 217, 131);
            --color3: rgb(90, 97, 122);
            --Seccion: rgb(216, 216, 216);
            --letra: rgb(242, 234, 234);
        }
        .wrapper {
            width: 600px;
            display: grid;
            grid-template-columns: 50% 50%;
            grid-auto-rows: minmax(240px,auto);
            padding: 20px;
            row-gap: 10px;
        }
        .elemento {
            margin-left: 5px;
            margin-right: 5px;;
        }
        .grupo {
            width: 100%;
            height: 70%;
            margin-bottom: 3%;
        }
        .Texto {
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            width: 100%;
            height: 75%;
            background: var(--color1);
        }
        .Triangulo{
            width: 100%;
            height: 25%;
            position: relative;
            background: var(--color1);
        }
        .objtriangulo{
            position: absolute;
            width: 100%;
            height: 100%;
            background: white;
            clip-path: polygon(50% 0%, 40% 100%, 60% 100%);
        }
        .Seccion {
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            background: var(--color3);
            width: 100%;
            height: 27%;
        }
        .textTitulo {
            text-transform: uppercase;
            font-weight: bold;
            width: 100%;
        }
        .Seccion > span {
            position:static;
            border: 1px solid black;
        }

Codigo html:

<div class="wrapper">
        <div class="elemento">
            <div class="grupo">
                <div class="Texto">
                    <span>
                        linea 1<br> 
                        linea 2<br> 
                        linea 3<br> 
                        linea 4<br> 
                        linea 5<br> 
                    </span>
                </div>
                <div class="Triangulo">
                    <div class="objtriangulo"></div>
                </div>
            </div>
            <div class="Seccion">
                <span class="textTitulo">Sesion 1</span>
                    <span>Mediciones <br>e Incertidumbres</span>
            </div>
        </div>
        <div class="elemento">
            <div class="grupo">
                <div class="Texto">
                    <span>
                        linea 1<br> 
                        linea 2<br> 
                        linea 3<br> 
                        linea 4<br> 
                        linea 5<br> 
                        linea 6<br>
                        linea 7<br>
                        linea 8<br>
                    </span>
                </div>
                <div class="Triangulo">
                    <div class="objtriangulo"></div>
                </div>
            </div>
            <div class="Seccion">
                    <span> <b>SESION 1</b> <br>Mediciones <br>e Incertidumbres</span>
            </div>
        </div>
    </div>

Notas:

  1. el triangulo es un div creado con clip-path: polygon(50% 0%, 40% 100%, 60% 100%);
  2. los elementos están creados por varias partes como se puede ver en html

Pueden ejecutarlo en: https://jsfiddle.net/Traps/h0zbj72f/

3
  • El texto se te va a desbordar siempre porque el tamaño del grupo lo fijaste a un height: 70%; cámbialo a 100%. Los spans quedan uno al lado de otros porque le pusiste a Seccion un display:flex;, además de que los spans son elementos de línea. Si quieres que queden uno debajo del otro agrega a Seccion un flex-direction: column;
    – Jaime
    Commented el 30 sept. 2021 a las 0:34
  • No entendí muy bien que resultado final quisieras lograr. Recomiendo que consideres para la próxima adjuntar una imagen de lo que quieres, aunque sea hecha en Paint.
    – Jaime
    Commented el 30 sept. 2021 a las 0:37
  • @JaimeMenéndez Hola la idea es que el height siempre tenga un mínimo de 240px pero si el texto sobre pasa esos 240 que se ajuste por eso yo pensé en poner grid-auto-rows: minmax(240px,auto); pero solo funciona en el mínimo ¿se entiende?
    – Trapss
    Commented el 30 sept. 2021 a las 13:46

1 respuesta 1

0

La solución al problema del punto 2 sería aplicar flex-direction: column; a la .Seccion

El primer punto no termino de entenderlo.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.