Question

我正试图在容器的每个角落放一个点。我认为这个技巧的结合是 .my-container：before 并设置:before的边框或背景属性。我想要的效果类似于SO#17306087，但我不想使用图像。

修改

jsfiddle

我会使用这个，所以更喜欢用css类自动发生（不需要额外的DOM元素）。

修改

由于svg是基于文本的，可以直接插入到css中，我正在研究这种方法。我在这里看到这确实有效：example fiddle

~~my updated fiddle（目前有一个css错误，我正试图指出）~~ fixed fiddle with 4 dots using background prop

svg是有效的，不会像DOM一样抛出错误：fiddle

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

fiddle

你也可以在元素中绘制圆圈，但是你不能将它应用于具有背景的元素。

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

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

updated fiddle

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');

这将为每个具有类的元素追加（给出）4个点.myDivsThatNeedDotsClass

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

如果你没有相同的课程，那么你可以做到这一点

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

Answer 4

以下可以是您的加价 <div class="my-container"> <div class="tr"></div> <div class="tl"></div> <div class="br"></div> <div class="bl"></div> <p class="stuff">Some stuff</p> </div>

css如下

body {
    margin: 10px; /* for visibility */
}

.my-container {
    background-color: #eee; /* for visibility */
    position: relative;
width:98%;
border:1px dotted red;
}


.my-container .stuff {
text-align:center;
}

.tr,.tl,.br,.bl{
     position:absolute;
     border:5px solid red;
     border-radius:10px;
 }

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

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

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

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

CSS：div角落的点

4 个答案:

fiddle