CSS: dots in corners of div

Question

I'm trying to put a dot in each corner of a container. I'm thinking the trick to this is a combination of .my-container:before and setting the :before's border or background property. The effect I want is similar to SO#17306087, but I don't want to use images.

Edit

jsfiddle

I'll be using this quite a bit, so would prefer it to happen automatically with a css class (not require additional DOM elements).

Edit

Since svg is text-based and can be inserted directly into css, I'm looking into that method. I see here that this does work: example fiddle

my updated fiddle (currently has a css error that I'm trying to pin-point) fixed fiddle with 4 dots using background prop

The svg is valid and not throwing errors as DOM: fiddle

Answer 1

You can do it only on a div and with standard CSS.

The trick is to use the pseudo elements to display 2 circles using radial gradients.

.test1 {
    width: 200px;
    height: 200px;
    background-color: lightblue;
    position: absolute;
    left: 220px;
}

.test1:before, .test1:after {
    content: "";
    position: absolute;
    height: 100%;
    width: 20px;
    top: 0px;
    background-image: radial-gradient(circle at center, red 5px, transparent 5px), radial-gradient(circle at center, red 5px, transparent 5px);
    background-size: 20px 20px;
    background-position: top center, bottom center;
    background-repeat: no-repeat;
}

.test1:before {
    left: 0px;
}
.test1:after {
    right: 0px;
}

fiddle

You could also draw the circles in the elements itself, but then you can not apply it to elements having background.

The above code renders the circles pixelated. It's better leaving 1 pixel for the red/transparent transition

    background-image: radial-gradient(circle at center, red 5px, transparent 6px), radial-gradient(circle at center, red 5px, transparent 6px);

updated fiddle

Answer 2

Assuming you're okay with something a little crazy, there is a CSS only solution that's completely based on a single class (on a single element). The only caveat is that that element MUST have at least one child element (which should probably be the case anyways, right?)

.my-container:before, .my-container:after, .my-container *:first-child:before, .my-container *:first-child:after {
    content: '';
    height: 5px;
    width: 5px;
    position: absolute;
    background: #777;
    border-radius: 50%;
}
.my-container:after {
    right: 0;
    top: 0;
}
.my-container *:first-child:before {
    left: 0;
    bottom: 0;
}
.my-container *:first-child:after {
    bottom: 0;
    right: 0;
}

You can use :before and :after to create your dots, though the challenge comes in the fact that this only creates two dots per element. Because of this, I've set it to look for the first element inside the container, and apply the same styles to that. (the wildcard selector * looks for any element, and :first-child makes sure it only gets applied to one child element)

See fiddle: http://jsfiddle.net/5N9ep/2/

Now obviously this won't work in every situation, and you can always mess with the selector for that second element if you have something that will work better.

Other than that, if you want to make it a little more practical (but less cool), I would recommend just making two wrapper div elements, and giving each one of them a unique class, each creating two dots with a simple :before and :after.

Answer 3

http://jsfiddle.net/qQP84/

HTML :

<div class="maindiv">
    <div class="lefttop dot"></div>
    <div class="leftbottom dot"></div>
    <div class="righttop dot"></div>
    <div class="rightbottom dot"></div>
</div>

CSS

.maindiv {
     height: 150px;
     width: 150px;
    background: blue;
    position: relative;
}

.dot {
    height: 12px;
    width: 12px;
    border-radius: 100%;
    background: red;
    position: absolute;
}

.lefttop {
    top: 0;
    left: 0;
}

.leftbottom {
    bottom: 0;
    left: 0;
}

.righttop {
    right: 0;
    top: 0;
}

.rightbottom {
    right: 0;
    bottom: 0;
}

---

EDIT:

jQuery solution to easily append the dots to different divs that have the same class

$('<div class="lefttop dot"></div><div class="righttop dot"></div><div class = "leftbottom dot"></div><div class="rightbottom"></div>.appendTo('.myDivsThatNeedDotsClass');

This will append(give) the 4 dots to each element that has the class .myDivsThatNeedDotsClass

With this approach you can remove the HTML from above, but keep the css like it is.

If you don't have the same class for all of them, than you can do this

.appendTo('.myDivsThatNeedDotsClass, .anotherClassThatNeedsDots, #anIDthatNeedsDots');