CODEWITHSUNDEEP
javascripthtmlcss
Zac Holme
Zac Holme

Reputation: 39

How to keep the intersection of two borders?

Im working on a maze generation webapp and i'm having troubling finding out how to render the generated maze. Its simple to create the grid, but when removing walls between cells im getting a square gap in the bottom corner of the cell where the two previous borders overlapped. Is there any way to make it so the bottom corner is always filled in?

.container{
  width: 150px;
  height: 150px;
  border-top: 10px solid black;
  border-left: 10px solid black;
}

.row{
  display: flex;
}

.cell{
  width: 50px;
  height: 50px;
  box-sizing: border-box;
  border-bottom: 10px solid black;
  border-right: 10px solid black;
}


/* CODE THAT CAUSES ISSUE */
.c5{
  border-bottom: None;
  border-right: None;
}
<div class="container">
  <div class="row">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
  <div class="row">
    <div class="cell"></div>
    <div class="cell c5"></div>
    <div class="cell"></div>
  </div>
  <div class="row">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
</div>

Upvotes: 1

Views: 288

Answers (1)

dale landry
dale landry

Reputation: 8610

You could use pseudo class :after. Make your .c5 class position: relative and then make your .c5:after pseudo class position: absolute set your bottom and right positions to 0px and set a width and height the same as your border, 10px. It will place a 10px box over the bottom right corner of your div.

EDIT:

To make this more dynamic with changing sizes to your border, use a CSS variable to set the border-size on your maze elements, then use that same variable on your pseudo ::after class for height and width.

Note on CSS variables: CSS variables can be declared globally (:root element) or locally (selector that is using it). Since this will be used by multiple elements, declare it globally on the :root element, this way any of the roots children will have access to the variable.

.c5::after

Javascript in snippit is purely for display purposes to show ability to change dynamically within the roots variable, all the changing is done inside the CSS

const root = document.documentElement

const input = root.querySelector('#border-size')

input.addEventListener('change', (e) => {
if(e.target.value >= 3 && e.target.value < 25)
  root.style.setProperty('--maze-border', `${e.target.value}px`)
})
/* Set the size of your border here then 
each relavent size will change dynamically */
:root {
  --maze-border: 5px;
}

p {
  width: 300px;
}

.container{
  width: 150px;
  height: 150px;
  border-top: var(--maze-border) solid black;
  border-left: var(--maze-border) solid black;
}

.row{
  display: flex;
}

.cell{
  width: 50px;
  height: 50px;
  box-sizing: border-box;
  border-bottom: var(--maze-border) solid black;
  border-right: var(--maze-border) solid black;
}


/* CODE THAT CAUSES ISSUE */
.c5{
  border-bottom: None;
  border-right: None;
  position: relative
}

.c5::after {
  content: '';
  width: var(--maze-border);
  height: var(--maze-border);
  position: absolute;
  bottom: 0px;
  right: 0px;
  background: black;
}
<div class="container">
  <div class="row">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
  <div class="row">
    <div class="cell"></div>
    <div class="cell c5"></div>
    <div class="cell"></div>
  </div>
  <div class="row">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
</div>
<p>Set a size for your border and the pseudo <i><b>::after</b></i> class selectors <b>height</b> and <b>width</b> rule will change <i>dynamically</i> to the variable value set in the root element for <b><i>--maze-border</i></b>: </p>
<input type="number" size="5" id="border-size"> Input has a greater than 3 and a less than 25 pixel size restraint

--EDIT: Removed other example

Upvotes: 1

Related Questions