CODEWITHSUNDEEP
htmlcss
hatched
hatched

Reputation: 865

CSS - How do I place a rectangle in the middle of 2 squares

I'm trying to make something like this 2 rows of 4 squares , and a rectangle on every middle of 2 squares.

enter image description here

My current code:

.main {
  width: 100%;
  height: auto;
}

.square {
  width: 25%;
  position: relative;
  border: 1px solid black;
  float: left;
}

.square:before {
  content: "";
  display: block;
  position: relative;
  padding-top: 100%;
}
<div class="main">
  <div>
    <div class="square">
    </div>
    <div class="square">
    </div>
    <div class="square">
    </div>
    <div class="square">
    </div>
    <div class="square">
    </div>
    <div class="square">
    </div>
    <div class="square">
    </div>
    <div class="square">
    </div>
  </div>
</div>

I tried to do a rectangle class :

 <div class="square">
    <div class="rectangle"></div>
 </div>

.rectangle {
  width: 80%;
  height: 20px;
  position: relative;
  border: 1px solid yellow;
 }

But I can't find the way to position the rectangle in the middle of 2 squares. Any help here?

Upvotes: 1

Views: 832

Answers (2)

Temani Afif
Temani Afif

Reputation: 272995

Here is an easier idea with one element:

.square {
  width:50%;
  border:5px solid red;
  background:
    linear-gradient(black,black) left   30px center/ calc(50% - 60px) 40px,
    linear-gradient(black,black) right  30px center/ calc(50% - 60px) 40px,
    linear-gradient(black,black) top    30px center/ 40px calc(50% - 60px),
    linear-gradient(black,black) bottom 30px center/ 40px calc(50% - 60px),

    linear-gradient(red,red) center/100% 5px,
    linear-gradient(red,red) center/5px 100%;
   background-repeat:no-repeat;
}
.square:before {
  content:"";
  display:block;
  padding-top:100%;
}
<div class="square">

</div>

and with CSS variables to easily control everything:

.square {
  --h:30px;  /* Height of square*/
  --b:5px;  /* Thickness of lines*/
  --o:30px; /* Offset of the rectangle from the edge*/
  --c:30px; /* Offset of the rectangle from the center*/

  width:30%;
  display:inline-block;
  border:var(--b) solid red;
  background:
    linear-gradient(black,black) left   var(--o) center/ calc(50% - var(--o) - var(--c)) var(--h),
    linear-gradient(black,black) right  var(--o) center/ calc(50% - var(--o) - var(--c)) var(--h),
    linear-gradient(black,black) top    var(--o) center/ var(--h) calc(50% - var(--o) - var(--c)),
    linear-gradient(black,black) bottom var(--o) center/ var(--h) calc(50% - var(--o) - var(--c)),

    linear-gradient(red,red) center/100% var(--b),
    linear-gradient(red,red) center/var(--b) 100%;
   background-repeat:no-repeat;
}
.square:before {
  content:"";
  display:block;
  padding-top:100%;
}
<div class="square">

</div>

<div class="square" style="--h:40px;--b:2px;--o:5px;--c:40px">

</div>

<div class="square" style="--h:10%;--b:6px;--o:5%;--c:5%">

</div>

Upvotes: 1

symlink
symlink

Reputation: 12209

Instead of putting four rectangles along each border, create two per box with ::before and ::after, and push them to the border of their respective box:

html,body{margin:0}
*{box-sizing:border-box;}

.grid{
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    height: 48vw;
    width: 48vw;
}

.grid:nth-child(2){
    float:left;
}

.item{
    border: solid 2px orange;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.item::before,
.item::after{
    content: "";
    position: absolute;
    background-color: #000;
}

.item::before{
    width: 65%;
    height: 8%;
}

.item::after{
    width: 8%;
    height: 65%;
}

.item:nth-child(1)::before,
.item:nth-child(2)::before{
    bottom: -3px;
}

.item:nth-child(1)::after,
.item:nth-child(3)::after{
    right: -3px;
}

.item:nth-child(2)::after,
.item:nth-child(4)::after{
    left: -3px;
}

.item:nth-child(3)::before,
.item:nth-child(4)::before{
    top: -3px;
}
<div class="grid">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div  class="item"></div>
</div>
<div class="grid">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div  class="item"></div>
</div>

Upvotes: 5

Related Questions