CSS:div角落的点

您只能在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);

更新小提琴

假设你对一些有点疯狂的东西感到满意,那么只有一个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.