Create multiple elements with CSS generated content?

Question

I have a div (blue in the image below). I need to create a number of equally spaced circles within it. Can this be done with CSS generated content? I could create 2 with the :before and :after pseudo classes, but as I need more would a CSS solution requite more html elements?

I was hoping to not have to use an image to improve loading times and to optimize the site for different display density devices.

enter image description here

UPDATE This is for a responsive design so the width of the blue div will vary. They also need to remain equally spaced.

You're better off using a repeating background image that uses SVG, and falls back to PNG for browsers that don't support SVG. — zzzzBov
– zzzzBov, Commented Feb 5, 2014 at 18:26

Community · Accepted Answer · 2017-05-23 12:03:47Z

5

Well, we could create only two pseudo-elements for each element.

However, we could fake the effect by multiple box-shadow values, as follows:

.box:after {
    content: '';
    display: block;
    margin: 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: orange;

    box-shadow: 25px 0 0 0 orange,  /* Or use positive offsets if needed */
               -25px 0 0 0 orange,
                50px 0 0 0 orange,
               -50px 0 0 0 orange;
}

WORKING DEMO.

Update

Unfortunately, it's not possible to set a box-shadow offset relative to the width of the containing block. (The best try would be using relative em/rem units, but the font-size itself can not be changed per the width of the container)

Therefore, using radial-gradient background is the best option you'd have (as @Michal has suggested).

In order to keep the aspect ratio of the blue box, you could set the height to 0 and use a percentage value for padding-top which relies on the width of the containing box.

.box {
  background: orange radial-gradient(closest-side, transparent 40%, skyblue 0%);
  background-size: 20% 100%;
  width: 100%;
  height: 0;         /* Make sure that the box has no height */
  padding-top: 20%;  /* Keep 5:1 aspect ratio                */
}

Here is the WORKING DEMO.

edited May 23, 2017 at 12:03

CommunityBot

11 silver badge

answered Feb 5, 2014 at 18:33

Hashem Qolami

99.8k27 gold badges157 silver badges165 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Evanss Over a year ago

This is for a responsive design so the width of the blue div will vary and I need the background images to be equally spaced. If I try and change the box shadow position from px to a % value it seems to be invalid.

Michal Brašna · Accepted Answer · 2014-02-06 14:39:33Z

3

You could simply use radial-gradient.

.circles {
  /* red: color of the circles */
  background-color: red;
  /* 40%: size of circles proportionally to size of an element they reside in */
  /* blue: color of the background */
  background-image: radial-gradient(closest-side, transparent 40%, blue 0%);
  /* 20%: width of circle, so 5 in row */
  /* 100%: height of circle, so 1 in column */
  background-size: 20% 100%;

  /* 20%: keep the aspect ration 5:1 for dynamic layout */
  padding-bottom: 20%; /* or padding-top */
  /* 100%: fill up given space */
  width: 100%;
  /* 0: so the possible content doesn't distort the aspect ratio */
  height: 0;
}

Demo on http://jsfiddle.net/Gobie/t6X3Z/3/

edited Feb 6, 2014 at 14:39

answered Feb 5, 2014 at 18:33

Michal Brašna

2,33315 silver badges17 bronze badges

2 Comments

Evanss Over a year ago

Will this solution work for a responsive design? The width of the blue div will vary. When I do this to your fiddle the circles get elongated into ovals.

Michal Brašna Over a year ago

Updated, and it is just as @HashemQolami wrote.

Dryden Long · Accepted Answer · 2014-02-05 18:33:57Z

1

If you place several nested divs inside your container div you can use border-radius to create the circles. Something like this should do the trick:

HTML

<div id="container">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
</div>

CSS

#container {
    width: 300px;
    height: 100px;
    background-color: blue;
}
.circle {
    border-radius: 50%;
    width: 50px;
    height: 50px; 
    background-color: red;
    margin: 10px;
    display: inline-block;
}

Here is a fiddle of it in action: http://jsfiddle.net/GXL3w/

answered Feb 5, 2014 at 18:33

Dryden Long

10.2k2 gold badges38 silver badges48 bronze badges

1 Comment

Evanss Over a year ago

I was hoping to achieve this without adding new html elements.

Collectives™ on Stack Overflow

Create multiple elements with CSS generated content?

3 Answers 3

Update

1 Comment

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Update

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related