CODEWITHSUNDEEP
htmlcss
Max Prais
Max Prais

Reputation: 66

Create a div with 7 dividing vertical lines

Looking to create a div element, and inside it to have 7 equally dividing vertical lines.

I am aware this could be done with a container element and 7 inner elements, but I am wondering if there is an alternative CSS solution to do it with one element.

UPDATE: A bug in Chrome has stopped me from implementing the solution given, as at larger width the colour and width of the dividing lines are inconsistent: https://bugs.chromium.org/p/chromium/issues/detail?id=114835

If this issue does not apply to you, then enjoy!

Upvotes: 2

Views: 368

Answers (2)

Sebastian Brosch
Sebastian Brosch

Reputation: 43594

If you don't need a content separator (so only visual) you can use a background or shadow to create the lines. See the following examles / solutions:

solution using linear-gradient:

div {
  border:1px dashed red;
  height:100px;
  width:210px;
  background:linear-gradient(
    to right, 
    white, white calc(100% / 7 * 1 - 1px), black, white calc(100% / 7 * 1), 
    white, white calc(100% / 7 * 2 - 1px), black, white calc(100% / 7 * 2), 
    white, white calc(100% / 7 * 3 - 1px), black, white calc(100% / 7 * 3), 
    white, white calc(100% / 7 * 4 - 1px), black, white calc(100% / 7 * 4), 
    white, white calc(100% / 7 * 5 - 1px), black, white calc(100% / 7 * 5), 
    white, white calc(100% / 7 * 6 - 1px), black, white calc(100% / 7 * 6)
  );
}
<div></div>

solution using repeating-linear-gradient:

div {
  border:1px dashed red;
  height:100px;
  width:210px;
  background:
    linear-gradient(90deg, white 0, white 1px, transparent 1px), 
    repeating-linear-gradient(
      90deg, 
      black 0, black 1px, white 1px, white calc(100% / 7)
    ) 0 no-repeat;
}
<div></div>

solution using box-shadow:

div {
  border:1px dashed red;
  height:100px;
  width:210px;
  box-shadow: 
    inset calc(210px / 7 * 1 - 1px) 0px 0px 0px white, inset calc(210px / 7 * 1) 0px 0px 0px black,
    inset calc(210px / 7 * 2 - 1px) 0px 0px 0px white, inset calc(210px / 7 * 2) 0px 0px 0px black,
    inset calc(210px / 7 * 3 - 1px) 0px 0px 0px white, inset calc(210px / 7 * 3) 0px 0px 0px black,
    inset calc(210px / 7 * 4 - 1px) 0px 0px 0px white, inset calc(210px / 7 * 4) 0px 0px 0px black,
    inset calc(210px / 7 * 5 - 1px) 0px 0px 0px white, inset calc(210px / 7 * 5) 0px 0px 0px black,
    inset calc(210px / 7 * 6 - 1px) 0px 0px 0px white, inset calc(210px / 7 * 6) 0px 0px 0px black,
    inset calc(210px / 7 * 7) 0px 0px 0px white;
}
<div></div>

Upvotes: 5

NoOorZ24
NoOorZ24

Reputation: 3267

You can use table with 7 horizontal fields, you can use 7 div elements inside a div, you can use a list of 7 elements just like making horizontal navigation bar, buy you can't just divide one div using CSS.

if problem is that your inner borders are 2x wide just use:

border-collapse: collapse;

Upvotes: 0

Related Questions