Как мне можно сделать подобный круг с помощью css+js или же кто то знает библиотеку для этого?
2
-
Переведите вопрос на русский язык – dIm0n 20 авг '20 в 11:47
-
SVG + JS для анимации. – Инквизитор 20 авг '20 в 12:20
добавить комментарий
|
1 ответ
Сам круг в CSS можно как-то таким образом сделать, но внутренние элементы (серые и розовый), я думаю, лучше как SVG вставлять, т.к. закругленные бордеры делать - возни много. Либо все вместе как SVG вставлять.
body {
background: black;
}
.circle {
width: 500px;
height: 500px;
border-radius: 50%;
position: relative;
overflow: hidden;
}
.circle__center {
position: absolute;
top: calc(50% - 2px);
left: calc(50% - 2px);
z-index: 1000;
width: 4px;
height: 4px;
border-radius: 50%;
background: black;
}
.layer1 {
width: 100%;
height: 100%;
position: relative;
}
.layer2 {
background: black;
height: 375px;
width: 375px;
position: absolute;
z-index: 200;
border-radius: 50%;
top: calc(50% - 187.5px);
left: calc(50% - 187.5px);
}
.layer2__wrapper {
height: 370px;
width: 370px;
position: absolute;
border-radius: 50%;
overflow: hidden;
top: calc(50% - 185px);
left: calc(50% - 185px);
}
.layer3 {
background: black;
height: 250px;
width: 250px;
position: absolute;
z-index: 300;
border-radius: 50%;
top: calc(50% - 125px);
left: calc(50% - 125px);
}
.layer3__wrapper {
height: 245px;
width: 245px;
position: absolute;
border-radius: 50%;
overflow: hidden;
top: calc(50% - 122.5px);
left: calc(50% - 122.5px);
}
.layer4 {
background: black;
height: 125px;
width: 125px;
position: absolute;
z-index: 400;
border-radius: 50%;
top: calc(50% - 62.5px);
left: calc(50% - 62.5px);
}
.layer4__wrapper {
height: 120px;
width: 120px;
position: absolute;
border-radius: 50%;
overflow: hidden;
top: calc(50% - 60px);
left: calc(50% - 60px);
}
.item {
width: 100%;
height: 100%;
transform-origin: bottom right;
position: absolute;
background: gray;
bottom: 50%;
right: 50%;
}
.item:hover {
background: purple;
cursor: pointer;
}
.item:nth-child(1) {
transform: skew(38.57142857deg, 6.428571429deg);
}
.item:nth-child(2) {
transform: skew(-12.8571428deg, 57.85714286deg);
}
.item:nth-child(3) {
transform: rotate(90deg) skew(25.71428571deg, 19.28571429deg);
}
.item:nth-child(4) {
transform: rotate(180deg) skew(64.28571429deg, -19.28571429deg);
}
.item:nth-child(5) {
transform: rotate(180deg) skew(12.85714286deg, 32.14285714deg);
}
.item:nth-child(6) {
transform: rotate(270deg) skew(51.42857143deg, -6.428571429deg);
}
.item:nth-child(7) {
transform: rotate(270deg) skew(0, 45deg);
}
<div class="circle">
<div class="layer1">
<div class="layer1__item item"></div>
<div class="layer1__item item"></div>
<div class="layer1__item item"></div>
<div class="layer1__item item"></div>
<div class="layer1__item item"></div>
<div class="layer1__item item"></div>
<div class="layer1__item item"></div>
</div>
<div class="layer2">
<div class="layer2__wrapper">
<div class="layer2__item item"></div>
<div class="layer2__item item"></div>
<div class="layer2__item item"></div>
<div class="layer2__item item"></div>
<div class="layer2__item item"></div>
<div class="layer2__item item"></div>
<div class="layer2__item item"></div>
</div>
</div>
<div class="layer3">
<div class="layer3__wrapper">
<div class="layer3__item item"></div>
<div class="layer3__item item"></div>
<div class="layer3__item item"></div>
<div class="layer3__item item"></div>
<div class="layer3__item item"></div>
<div class="layer3__item item"></div>
<div class="layer3__item item"></div>
</div>
</div>
<div class="layer4">
<div class="layer4__wrapper">
<div class="layer4__item item"></div>
<div class="layer4__item item"></div>
<div class="layer4__item item"></div>
<div class="layer4__item item"></div>
<div class="layer4__item item"></div>
<div class="layer4__item item"></div>
<div class="layer4__item item"></div>
</div>
</div>
<div class="circle__center"></div>
</div>
-
Спасибо Вам за ответ. А не знаете, как сделать так, что бы как на скрине, некоторые элементы были больше и заходили на другие секции? – Juka Chu 3 сен '20 в 12:41
-
Если отдельно рассматривать круг и доп. элементы (розовый и более светлый серый), то сам круг, почти такой же, как на моем примере, но доп. элементы создают впечатление, что какие-то элементы круга находят на соседние элементы (увеличьте картинку и вы это увидите). Как я написал в ответе, доп элементы попробуйте вставлять как SVG отдельно. – xydope 3 сен '20 в 12:45
-
Вы извините, пожалуйста, что так много вопросов, а может также можете подсказать возможно ли сделать box-shadow или бордер для таких блоков неправильной формы, что бы он был по блоку? – Juka Chu 3 сен '20 в 12:55
-
Затрудняюсь ответить, но скорей нет, чем да. Для сложных фигур лучше использовать SVG. – xydope 3 сен '20 в 13:18