CSS - Positioning a rectangle between two squares

I need help creating a layout with 2 rows of 4 squares, each with a rectangle in the middle of two squares.

https://i.sstatic.net/9pWBi.png

This is the code I currently have:

.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've tried adding a "rectangle" class:

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

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

However, I am struggling to position the rectangle in between the two squares. Can anyone provide guidance on this?

htmlcss

Answer №1

Instead of using four rectangles on each border, opt for two per box by utilizing ::before and ::after pseudo-elements, positioning them at the border of the 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>

Answer №2

Consider this simpler concept using just 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>

Enhance the design further by utilizing CSS variables for easy customization:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Trouble aligning items in a fieldset with Bootstrap

While working on a wire frame, I am attempting to create the HTML structure based on it. The required structure that needs to be built is outlined in this diagram: https://i.sstatic.net/ypp2f.png Progress has been made on aligning elements using a two-col ...

htmlcsstwitter-bootstrapbootstrap-4

What is the best way to convert this JavaScript iteration function into jQuery?

I recently encountered an issue with my JavaScript function that returns a list of elements with the class ".youtube", loops through them, and calls another function. The JavaScript logic is flawless, but I wanted to convert it into jQuery for better reada ...

javascriptjqueryhtmlcss

What is the process for including icons on buttons?

I have been researching how to use Font Awesome software to incorporate icons into my HTML elements, but I am uncertain about the implementation process for my specific case. Currently, I have created a basic webpage with buttons and I would like to includ ...

htmlcss

AngularJs - Show the response only upon verifying the correct answer

Let me provide an overview of what has been implemented so far: When a user selects an answer in radio buttons and clicks on "Check Answer", the system displays either "Correct" (in green) or "Incorrect" (in red) in the first answer field. Additionally, th ...

javascripthtmlcssangularjs

Impeccable method to safeguard element from external css interference

Currently, I am working on a script that will be utilized across various pages and I want to ensure that the elements it generates are not affected by the CSS styles of those pages. Some individuals suggest using CSS like this: body>*{min-height:200px; ...

cssinheritance

CSS has inexplicably ceased to function properly, with the exception of the body

My roommate submitted his project, but only the CSS for the body tag and Bootstrap elements are working properly. When inspecting the webpage, I noticed that none of the CSS changes were showing up, even after editing the Sublime file (except for the body ...

htmlcss

Flask - Refreshing Forms Dynamically

In an effort to enhance the responsiveness of my app, I am looking for a way to prevent the page from reloading every time a POST request is sent. My current setup includes a dynamically generated form with input fields designed like this: <div class=&q ...

javascriptpythonhtmlflask

Ways to align an image and text vertically next to each other within a div

After coming across the solution for ''Vertical Align in a Div ", I decided to implement Adam's answer. However, my challenge lies in figuring out how to display both an image and text side by side with the text centered vertically. View My ...

htmlcss

Using JQuery to call a PHP file and verify a unique identifier

I've been attempting to use this tutorial to check the availability of certain IDs while a user fills out forms. However, I'm working with PostgreSQL instead of MySQL and seem to be encountering issues with my PHP file. There seems to be a small ...

phpjqueryhtmlajaxpostgresql

AJAX - Implementing a delay in displaying AJAX results

My search function uses AJAX to retrieve data from the web-server, and I am trying to implement a fade-in animation for each search result. I want the results to load and fade in one by one with a slight delay between them. Currently, it seems like all th ...

javascriptjqueryhtmlcssajax

I'm looking to make my PayPal donate button smaller after noticing that PayPal is making it larger. How can I adjust the size of my customized PayPal

I am seeking your help in resolving an issue with PayPal enlarging my button from 130px x 65px to 300px x 150px. I have checked the button on both a local browser and within the Square Space editor, but the result remains the same. I even attempted to adju ...

htmlpaypal

The functionality for dragging elements is not functioning properly in JavaScript

Here is the code I used in an attempt to make a div element draggable: let div = document.querySelector('div') div.onmousedown = function() { div.addEventListener('mousemove', move, true) } window.onmouseup = function() { window. ...

javascripthtmlcss

Can I insert JavaScript code in any location within an HTML file?

Typically, Javascript code is placed in the header section of HTML code. <head> <script type="text/javascript" language="javascript" src="core.js"></script> ... </head> However, I've tested putting Javascript code in the body ...

javascripthtml

issue with arranging content in a two-column layout with headers

Currently working on my first website and running into some CSS issues. I'm aiming for a two-column + header layout that fills the entire screen space of the website. I have the following specifications in mind: Header takes up 20% of the screen he ...

htmlcss

Fix the positioning of a div in BootStrap and CSS code

Hey there, I'm relatively new to CSS/Bootstrap and currently in the process of learning. I might need to incorporate some CSS into the "chat_funcs" div, but unsure about what code to input to achieve my desired outcome. The issue at hand: What I am ...

htmlcsstwitter-bootstrap

Achieving consistent alignment for text on a curved path

I am working on a unique "flow-builder" project and I need to achieve this specific result: https://i.sstatic.net/6TTuS.png At the moment, my current edge looks like this: https://i.sstatic.net/9ydzx.png The text on the edge is currently aligned with the ...

cssreactjscanvas

Are numerous h1 tags allowed?

Many debates have arisen regarding the use of multiple h1 tags on a single web page. What if additional semantic meaning is provided using hgroup, article, header, footer, and section tags? Despite numerous discussions, a definitive answer remains elusiv ...

htmlsemantic-markupweb-frontend

Animating toasts in Bootstrap

Exploring the options available at https://getbootstrap.com/docs/4.3/components/toasts/ To customize your toasts, you can pass options via data attributes or JavaScript. Simply append the option name to data- when using data attributes. If you're lo ...

javascripthtmltwitter-bootstrap

The Bootstrap navigation bar vanishes when viewed on mobile devices

I've integrated Bootstrap 5 with my navbar, but when viewed on a mobile device, the buttons disappear. Even hovering over them doesn't display anything. Is there a solution for this issue? Below is the code snippet: <nav class="navbar na ...

htmlcssbootstrap-5

Tips for sending the output of a Python function to the webpage associated with the clicked action button in Python's Bottle framework

Here is a method I have: @post('/home', method='post') def myFunction(): if(len(request.forms.get('Matrix_dimension').strip()) != 0): length = int(request.forms.get('Matrix_dimension').strip()) tableRow = ...

pythonhtmlbottle