Geek asks and answers

Create multiple elements with CSS generated content?

I have a div (blue in the image below). I need to create several equally spaced circles in it. Can this be done with CSS content? I could create 2 s: before and: after the pseudo classes, but since I need more, will the CSS solution require more html elements?

I was hoping not to use the image to increase load time and optimize the site for different display density devices.

enter image description here

UPDATE This is for responsive design, so the width of the blue div will be different. They must also remain at equal distance from each other.

+3
source share
3 answers

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

box-shadow :

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

.

Update

, box-shadow . ( em/rem, font-size )

, radial-gradient - , ( @Michal).

, height 0 padding-top, .

.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                */
}

.

+5

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;
}

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

+3

If you place several nested divinside your container div, you can use border-radiusto create 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 the fiddle in action: http://jsfiddle.net/GXL3w/

+1
source

More articles:


All Articles