CSS:div角落的点

Question

我试图在容器的每个角落放一个点.我在想这个技巧就是.my-container:在设置:before边框或背景属性之前的组合.我想要的效果类似于SO#17306087,但我不想使用图像.

编辑

的jsfiddle

我将使用它相当多,所以希望它与css类自动发生(不需要额外的DOM元素).

编辑

由于svg是基于文本的,可以直接插入到css中,我正在研究这种方法.我在这里看到这确实有用:示例小提琴

我更新的小提琴(目前有一个css错误,我试图 精确定位)固定小提琴4点使用背景道具

svg是有效的,不会像DOM那样抛出错误:小提琴

Answer 1

您只能在div和标准CSS上执行此操作.

诀窍是使用伪元素使用径向渐变显示2个圆.

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

小提琴

您也可以在元素本身中绘制圆圈,但之后您无法将其应用于具有背景的元素.

上面的代码使圆圈像素化.红色/透明过渡最好留下1个像素

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

更新小提琴

Answer 2

假设你对一些有点疯狂的东西感到满意,那么只有一个CSS解决方案完全基于单个类(在单个元素上).唯一需要注意的是,该元素必须至少有一个子元素(反正应该是这样的,对吗？)

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

您可以使用:before和:after创建您的点,但挑战在于这只会为每个元素创建两个点.因此,我将其设置为查找容器内的第一个元素,并对其应用相同的样式.(通配符选择器*查找任何元素,并:first-child确保它只应用于一个子元素)

见小提琴:http: //jsfiddle.net/5N9ep/2/

现在显然这不适用于所有情况,如果你有更好的工作,你总是可以搞乱第二个元素的选择器.

除此之外,如果你想让它变得更实用(但不那么酷),我建议只制作两个包装div元素,并为它们中的每一个提供一个独特的类,每个元素创建两个点,简单:before和: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;
}

编辑：

jQuery 解决方案可轻松将点附加到具有相同类的不同 div

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

这将向具有类 .myDivsThatNeedDotsClass 的每个元素附加（给予）4 个点

使用这种方法，您可以从上面删除 HTML，但保持 css 原样。

如果您没有为所有这些课程设置相同的课程，那么您可以这样做

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