CSS: точки в ъглите на div

Опитвам се да сложа точка във всеки ъгъл на контейнер. Мисля, че трикът за това е комбинация от .my-container:before и настройка на свойството граница или фон на :before. Ефектът, който искам, е подобен на SO#17306087, но не искам да използвам изображения.

Редактиране

jsfiddle

Ще използвам това доста често, така че бих предпочел да се случи автоматично с css клас (без да изисква допълнителни DOM елементи).

Редактиране

Тъй като svg е базиран на текст и може да се вмъкне директно в css, разглеждам този метод. Тук виждам, че това работи: примерна цигулка

моята актуализирана цигулка (в момента има css грешка, която се опитвам да закача -point) поправена цигулка с 4 точки, използвайки фонова опора

SVG е валиден и не хвърля грешки като DOM: fiddle


css css-shapes
person Jakob Jingleheimer    schedule 07.01.2014    source източник

Отговори (4)


arrow_upward
14
arrow_downward

Можете да го направите само на 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);

актуализирана цигулка

person vals    schedule 07.01.2014
comment
Точно това търсех, с изключение на това, че кръговете са адски пикселизирани :/ - person Jakob Jingleheimer; 08.01.2014
comment
Добавен е по-добър пример - person vals; 08.01.2014

arrow_upward
7
arrow_downward

Имам същия проблем, когато се опитвам да pip инсталирам django, има ли начин да го инсталирам правилно, без всички тези синтактични грешки? Накрая пише Successfully Installed Django Cleaning up.... Не разбирам.
person Blake Mann    schedule 07.01.2014
comment
Готино благодаря! това е лудост, но работи. Бих искал да е по-чисто, но може би искам луната. - person Jakob Jingleheimer; 07.01.2014
comment
Подходът за използване на два обвиващи елемента вероятно е по-чисто решение, въпреки че изисква промяна на вашия html. Използването на рамково изображение обаче все още е може би най-чистата техника, ако не сте го изключили напълно. - person Blake Mann; 07.01.2014
comment
Ако мога да направя граничното изображение с вграден svg, това трябва да е добре. - person Jakob Jingleheimer; 07.01.2014

arrow_upward
5
arrow_downward

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');
person CRABOLO    schedule 07.01.2014
comment
Здравейте, благодаря, но искам да се прилага чрез един клас, например от .my-container. Планирам да използвам това доста често, така че да се налага ръчно да включвате точките всеки път не е идеално. - person Jakob Jingleheimer; 07.01.2014
comment
Здравейте отново, благодаря ви за актуализацията, но знам как да направя това с jquery и/или множество DOM елементи. Търся чисто css решение. - person Jakob Jingleheimer; 07.01.2014

arrow_upward
-2
arrow_downward

следното може да бъде вашата надценка <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;
 }
person Green Wizard    schedule 07.01.2014
comment
благодаря ви, но точно това казах, че не искам да правя (добавете куп маркиране). търся чисто css решение. - person Jakob Jingleheimer; 08.01.2014