how about positioning a div in another div with css?

Question

how about positioning a div in another div with css?

Navigation

#1 by (2 votes)
#2 by (2 votes)
#3 by (1 votes)
#4 by (0 votes)
#5 by (0 votes)
#6 by (0 votes)

3

What I'm trying to do is take the following figure:

By practicing CSS I have achieved the following:

.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>

and it is as far as I could go if someone can help position the diamond behind the parallelogram

html css

asked by Ing. Ricardo Rojas De La cruz 14.09.2018 в 21:20

source

6 answers

2

I see that they have already answered the question and they did it very well, so I will only suggest it to you in another way, using the same element and the rest with after and 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>

answered by 15.09.2018 в 01:05

1

I would use the display: grid; I see it much simpler, although the previous answers already give you the solution. with the grid it will be easier to center it.

the z-index will help you to put one or the other in front.

   .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>

answered by 17.09.2018 в 19:31

0

Use z-index to change the order (the smaller number is the one that will be lower)

.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;
}

Then you only have to modify the height to achieve the desired image

answered by 14.09.2018 в 21:26

0

This is the closest I've come.

.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>

answered by 17.09.2018 в 20:45

0

This is another way to do it. I hope it helps you, you will see that you do not have to use calc only grid, margins and borders.

enter the code here

    <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>

answered by 21.09.2018 в 12:51

Why do I return iQueryable instead of an instance of my class? Validate that multiple inputs are not empty

score 2 · Accepted Answer

You almost have it done. You just need a couple of things:

Specify the z-index of the elements (to indicate which one will be on top of the other)

Give a positioning to the elements (only the elements positions are affected by the z-index)

You would not even have to give a value to top or left that would be like 0 by default (adjusting to the upper left corner of the parent container).

With those two changes, it looks like this:

.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>