CSS：div角落的点

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