3

lo que estoy intentado es sacar la siguiente figura:

introducir la descripción de la imagen aquí

practicando css he conseguido lo siguiente:

.paralelogramo {
             width: 150px; 
             height: 100px; 
             border: 3px solid #555; 
             background: #428bca;
             -webkit-transform: skew(-20deg);
             -moz-transform: skew(-20deg);
             -ms-transform: skew(-20deg);
             -o-transform: skew(-20deg);
             transform: skew(-20deg);
        }
        .rombo {
     width: 100px; 
     height: 100px;
     top: 50px; 
     border: 3px solid #555; 
     background: #428bca;
     -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     -o-transform: rotate(45deg);
     transform: rotate(45deg);
}
.mycontainer
{
     position: absolute;

}
        <section class="feature_area">
            <div class="mycontainer">

              <div class="paralelogramo"><h1>hola mundo</h1></div>
            <div class="rombo">
                
            </div>
            </div>


        </section>

y es hasta donde pude llegar si alguien puede ayudar posicionar el rombo detrás del paralelogramo

6 respuestas 6

2

Casi lo tienes hecho. Sólo te faltarían un par de cosas:

  1. Especificar el z-index de los elementos (para indicar cuál va a ir encima del otro)
  2. Dar un posicionamiento a los elementos (sólo los elementos posiciones se ven afectados por el z-index)

Ni siquiera tendrías que darle un valor al top o left que serían como 0 por defecto (ajustándose a la esquina superior izquierda del contenedor padre).

Con esos dos cambios, se ve así:

.paralelogramo {
  width: 150px;
  height: 100px;
  border: 3px solid #555;
  background: #428bca;
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  -ms-transform: skew(-20deg);
  -o-transform: skew(-20deg);
  transform: skew(-20deg);
  position: absolute;
  z-index: 2;
}

.rombo {
  width: 100px;
  height: 100px;
  top: 50px;
  border: 3px solid #555;
  background: #428bca;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  z-index: 1;
}

.mycontainer {
  position: absolute;
}
<section class="feature_area">
  <div class="mycontainer">
    <div class="paralelogramo">
      <h1>hola mundo</h1>
    </div>
    <div class="rombo">
    </div>
  </div>
</section>

2

Veo que ya te han respondido la pregunta y lo hicieron muy bien, por lo yo solo te lo voy a plantear de otra manera, usando un mismo elemento y lo demás con after y before.

body{
  background: #f3f3f3;
}

.tag{
  --ancho-cola: 40px;
  --altura-cola: 10px;
  --angulo: 15; /*En teoria no debe ser mayor al ancho de la cola*/
  font-family: arial;
  position: relative;
  display: inline-flex;
  padding: 0.5em calc( 1em + ( var(--angulo) * 1px) / 2 );
}

.tag *{
  order: 2;
  position: relative;
  z-index: 2;
}

.tag::before,
.tag::after{
  content: '';
  --x: calc(var(--angulo) * 1px);
  display: inline-flex;
  position: absolute;
  order: 1;
  height: 100%;
  left: 0;
  top: 0;
}

.tag::before{
  background-color: #fdb64e;
  width: 100%;
  z-index: -1;
  clip-path: 
    polygon(
      var(--x) 0, 
      100% 0,
      calc(100% - var(--x)) 100%,
      0 100%
    );
}

.tag::after{
  --h: var(--altura-cola);
  --w: var(--ancho-cola);
  background-color: #f78d1f;
  z-index: -2;
  width: var(--w);
  height: calc(100% + var(--h));
  clip-path:
    polygon(       
      var(--x) 0px,        
      0% calc(100% - var(--h)),       
      calc( 100% - var(--x) ) 100%,       
      100% 0px     
    );
}












/*ESTOS ESTILOS LOS PUEDES IGNORAR*/

style{
  display: block;
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  background: dimgray;
  color: cyan;
  font-family: monospace;
}
<div class="tag" contenteditable>
  Esto es editable
</div>

<pre contenteditable>
  <style>/*EDITA ESTA PARTE Y VERÁS LA MAGIA*/

.tag{
  --ancho-cola: 40px;
  --altura-cola: 10px;
  --angulo: 15;
}</style>
</pre>

1

Yo utilizarían el display:grid; lo veo mucho más sencillo, aunque las respuestas anteriores ya te dan la solución. con el grid te será más fácil centrarlo.

el z-index te ayudará para poner un u otro delante.

   .mycontainer{
display: grid;
grid-template-areas: "overlap";
justify-content: center;
}

.paralelogramo {
grid-area: overlap;
z-index: 1;

         width: 150px; 
         height: 100px; 
         border: 3px solid #555; 
         background: #428bca;
         -webkit-transform: skew(-20deg);
         -moz-transform: skew(-20deg);
         -ms-transform: skew(-20deg);
         -o-transform: skew(-20deg);
         transform: skew(-20deg);
    }
    .rombo {
        grid-area:overlap;
        z-index: 2;

 width: 100px; 
 height: 100px;
 top: 50px; 
 border: 3px solid #555; 
 background: #428bca;
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(45deg);
}
  <section class="feature_area">
        
        <div class="mycontainer">

            <div class="paralelogramo"><h1>hola mundo</h1></div>
            <div class="rombo"></div>
            
        </div>


    </section>

0

Utiliza z-index para cambiar el orden (el numero mas chico es el que estará mas abajo)

.paralelogramo {
     width: 150px; 
     height: 100px; 
     border: 3px solid #555; 
     background: #428bca;
     -webkit-transform: skew(-20deg);
     -moz-transform: skew(-20deg);
     -ms-transform: skew(-20deg);
     -o-transform: skew(-20deg);
     transform: skew(-20deg);
     z-index:100;
}
.rombo {
    width: 100px; 
    height: 100px;
    top: 50px; 
    border: 3px solid #555; 
    background: #428bca;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    z-index: 50;
}

Después solo te queda modificar la altura para lograr la imagen deseada

0

Esto es lo más cerca que he llegado.

.mycontainer{
display: grid;
grid-template-columns: repeat(
    24, 1fr);
grid-template-rows: repeat(24, 1fr;);
margin-top:45px;
}

.mycontainer .rombo{
align-self: end;
}

.mycontainer .paralelogramo{
align-self: start;
}

.paralelogramo {
z-index: 2;
        grid-column-start: 12;
        grid-row-start:3;




         width: 400px;
         height: 100px;
         border: 3px solid #555;
         background: #428bca;
         -webkit-transform: skew(-20deg);
         -moz-transform: skew(-20deg);
         -ms-transform: skew(-20deg);
         -o-transform: skew(-20deg);
         transform: skew(-30deg);
    }
    .rombo {
        grid-column-start: 12;
        grid-row-start: 3;
    z-index: 1;
border-bottom:50px;
 margin-top:6px;
 width:50px;
 height:119px;
 border: 3px solid #555;
 background: rgb(6, 64, 116);
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(31deg);
 
   

}

  

 
<section class="feature_area">
        
        <div class="mycontainer">

            <div class="paralelogramo"><h1>hola mundo</h1></div>
            <div class="rombo"></div>
            
        </div>


    </section>

0

Esta es otra manera de hacerlo. Espero te ayude, verás que no hay que usar calc sólo grid, margenes y bordes.

introducir el código aquí

    <div class="mycontainer">

        <div class="paralelogramo"><h1>hola mundo</h1></div>
        <div class="rombo"></div>

    </div>

</section>

*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}



.mycontainer{
    display: grid;
    grid-template-columns: repeat(
        24, 1fr);
    grid-template-rows: repeat(24, 1fr);
    grid-row-gap: 0;
    }


    .mycontainer>.paralelogramo{
        align-self: end;
        justify-self:start;
       }
    
    .mycontainer .rombo{
    align-self: start;
    justify-self: start;
    }

   
    .paralelogramo {
  
            grid-column-start: 2;
            grid-column-end: 4;
            grid-row-start:1;
             width: 400px;
             height: 100px;
             margin-left: 29px;
             /* border: 3px solid #555; */
             background: #428bca;
             -webkit-transform: skew(-20deg);
             -moz-transform: skew(-20deg);
             -ms-transform: skew(-20deg);
             -o-transform: skew(-20deg);
             transform: skew(-30deg);
        }

        .rombo {
            grid-column-start: 2;
            grid-row-start: 2;
        

    border-bottom-style: solid transparent;
    border-top: solid blue;
    border-left: solid transparent;
    border-right: solid transparent;
    border-width: 60px;
   
    border-bottom: solid transparent; 
     width:50px;
     height:100px;
    
     
     -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     -o-transform: rotate(45deg);
     transform: rotate(0deg);
    }
<section class="feature_area">
        
        <div class="mycontainer">

            <div class="paralelogramo"><h1>hola mundo</h1></div>
            <div class="rombo"></div>
            
        </div>


    </section>

2
  • 1
    no publiques tantas respuestas para una sola pregunta, eso no es bien visto en la comunidad; deja solo una y en esa al darle editar añade todo lo que te haga falta, por que tan solo para esta pregunta dejaste 4 respuestas aunque una la borraste
    – user75901
    el 22 dic. 2018 a las 20:00
  • Disculpas. Lo tendré en cuenta para la siguiente vez. el 22 dic. 2018 a las 21:49

Tu Respuesta

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

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