Как организовать структуру div с радиусом, используя CSS

Я пытаюсь создать HTML-страницу, показанную на этом образце изображения.

http://i57.tinypic.com/14udpo4.png

Я хочу разместить другой компонент поверх этого черного и бордового кругов. Для этого я использую тег Структура div и span. И используя span background-image, чтобы применить это изображение в качестве фона.

Моя проблема в том, что будет структурой div и span, чтобы расположить черный круг по радиусу тегов div/span, содержащих бордовый круг в качестве фона.

До сих пор у меня есть центр круга. Я не знаю, как организовать вокруг него другие круги

div.table-text {
  position: fixed;
  top: 20%;
  left: 20%
}
span.table-text {
  position: inherit;
  display: block;
  width: 60%;
  height: 60%;
  background-image: url(../images/table-text.png);
  background-position: bottom;
  background-repeat: no-repeat;
}
<div class="table-text">
  <span class="table-text">
    </span>
</div>

Источник

4 ответа

Решение

Я не уверен, что понял вопрос, но постараюсь ответить.

Вы не можете использовать что-то вроде cos() для размещения элементов в HTML, вам придется использовать негативы margin-top: или же position: absolute;

Мой совет: используйте отрицательные поля для черных точек слева и справа.

Редактировать: я сделал вашу работу, теперь платите мне! @:

.circle {
    display: inline-block;
    border-radius: 200px;
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: black;    
}
#bigCircle {
    border-radius: 200px;    
    width: 400px;
    height: 400px;
    margin: 0 auto;
    background-color: brown;
}
#bottom {
    margin: 50px calc(50% - 50px);
}
#left {
    margin: -50px calc(25% - 50px);   
}
#right {
    margin: -50px calc(75% - 50px);
}
<div id="bigCircle"></div>
<div class="circle" id="left"></div>
<div class="circle" id="bottom"></div>
<div class="circle" id="right"></div>

JSFiddle - ДЕМО

Источник

Не зная остальной структуры вашего документа, я собрал для вас это доказательство концепции, используя абсолютное позиционирование, которое, мы надеемся, укажет вам правильное направление.

Если вам нужно что-то разъяснить или что-то из этого не соответствует вашим потребностям, пожалуйста, дайте мне знать, и я постараюсь обновить его соответствующим образом.

*{
    box-sizing:border-box;
    color:#fff;
    font-family:sans-serif;
}
.top{
    background:red;
    border-radius:50%;
    margin:-10% auto 0;
    padding:0 0 75%;
    position:relative;
    width:75%;
}
div>div{
    background:green;
    border-radius:50%;
    overflow:hidden;
    padding:0 0 20%;
    position:absolute;
    width:20%;
}
div.one{
    left:-10%;
    top:80%;
}
div.two{
    left:40%;
    top:103%;
}
div.three{
    right:-10%;
    top:80%;
}
p{
    text-align:center;
    position:absolute;
    margin:0;
    width:100%;
}
.top>p{
    top:15%
}
.top>div>p{
    top:5%;
}
<div class="top">
    <p>top</p>
    <div class="one">
        <p>one</p>
    </div>
    <div class="two">
        <p>two</p>
    </div>
    <div class="three">
        <p>three</p>
    </div>
</div>

Источник

Я думаю, что вы хотите, как здесь для отзывчивости вы можете использовать значение в процентах или максимальной ширины.

<div class="maroon">
<div class="m-child m-child1"></div>
<div class="m-child m-child2"></div>
<div class="m-child m-child3"></div>
<div class="m-child m-child4"></div>
</div>

.maroon{
max-width: 300px;
max-height:300px;
background:maroon;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
}
.m-child, .maroon{
position: absolute;
border-radius:100%;
}
.m-child{
background: #000;
width:100px;
height:100px;
}
.m-child1{
left: -50px;
top:0;
bottom: 0;
margin: auto;
}
.m-child2{
right: -50px;
top:0;
bottom: 0;
margin: auto;
}
.m-child3{
top: -50px;
left: 0;
right:0;
margin: auto;
}
.m-child4{
bottom: -50px;    
left: 0;
right:0;
margin: auto;
}
Источник

Я думаю, что вам нужно что-то вроде следующего: вы можете вносить изменения в соответствии с вашими требованиями.

.middle_circle {
    background: none repeat scroll 0 0 red;
    border-radius: 100%;
    height: 200px;
    left: 220px;
    position: absolute;
    top: 60px;
    width: 200px;
}
.circle{
    position:relative;
    width:5%;padding-bottom:50%;
    margin-left:47.5%;
}
.circle div {
    position:absolute;
    top:0; left:0;
    width:100%; height:100%;
    -webkit-transform : rotate(24deg);
    -ms-transform : rotate(24deg);
    transform : rotate(24deg);
}
.circle:before, .circle div:before {
    content:'';
    position:absolute;
    top:0; left:0;
    width:100%; padding-bottom:100%;
    border-radius: 100%; background:black;
}
<div class="circle">
    <div><div><div><div><div><div><div><div><div><div><div><div><div><div><div>
    </div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>
</div>
<div class="middle_circle"></div>

Проверьте скрипку.

Источник
Другие вопросы по тегам