Hola Tengo 2 problema soy nuevo en esto y estaba pensando en hacer unas figuras con divs:
- 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
- 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 :
Para dar un ejemplo del 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:
- el triangulo es un div creado con
clip-path: polygon(50% 0%, 40% 100%, 60% 100%);
- los elementos están creados por varias partes como se puede ver en html
Pueden ejecutarlo en: https://jsfiddle.net/Traps/h0zbj72f/
grupo
lo fijaste a unheight: 70%;
cámbialo a 100%. Losspans
quedan uno al lado de otros porque le pusiste aSeccion
undisplay:flex;
, además de que los spans son elementos de línea. Si quieres que queden uno debajo del otro agrega aSeccion
unflex-direction: column;
height
siempre tenga un mínimo de 240px pero si el texto sobre pasa esos 240 que se ajuste por eso yo pensé en ponergrid-auto-rows: minmax(240px,auto);
pero solo funciona en el mínimo ¿se entiende?