Вход

Просмотр полной версии : Круг из 7 частей

GeorgieDev
13.04.2021, 08:57
<div class='sectionsCircle'>
<div class='section'>1</div>
<div class='section'>2</div>
<div class='section'>3</div>
<div class='section'>4</div>
<div class='section'>5</div>
<div class='section'>6</div>
<div class='section'>7</div>
</div>


размеры круга 300x300.
Как его сделать из 7 равных частей?
рони
13.04.2021, 11:18
GeorgieDev,
может svg?
GeorgieDev
13.04.2021, 12:59
GeorgieDev,
может svg?

<div class='sectionsCircle'>
<div class=rictangle>1</div>
<div class=rictangle>2</div>
<div class=rictangle>3</div>
<div class=rictangle>4</div>
<div class=rictangle>5</div>
<div class=rictangle>6</div>
<div class=rictangle>7</div>
</div>



.sectionsCircle {
position: relative;
height: 300px;
width: 300px;
background-color: black;
opacity: .95;
border-radius: 50%;
overflow: hidden;
display: flex;
justify-content: center;
}


.rictagle{
overflow: hidden;
position: absolute;
width: 150px;
height: 150px;
transform-origin: 0% 100%;
background-color: blue;
margin-left: 150px;
}


Сделал таким образом, но первый элемент находится под вторым, и последним. Надо как-то менять z-index, но вопрос, как лучше? Или есть другие идеи. Буду рад услышать)
рони
13.04.2021, 13:19
GeorgieDev,
<!DOCTYPE html>

<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
svg{width:300px;display:block;margin:0 auto;}
use:hover{fill:#000;}
</style>

</head>

<body>
<svg viewBox="0 0 10 10">
<defs>
<clipPath id="circle">
<circle cx="5" cy="5" r="5" />
</clipPath>
<rect id="seg" y="0" width="14" height="10" />
</defs>
<g clip-path="url(#circle)">
<use xlink:href="#seg" fill="pink"/>
<use xlink:href="#seg" fill="green" />
<use xlink:href="#seg" fill="orange" />
<use xlink:href="#seg" fill="teal" />
<use xlink:href="#seg" fill="tomato"/>
<use xlink:href="#seg" fill="gold"/>
<use xlink:href="#seg" fill="darkorange" />
</g>
</svg>
<script>
document.querySelectorAll('use').forEach((el, i) => el.setAttribute('x', 10/7*i))
</script>
</body>
</html>
рони
13.04.2021, 13:37
GeorgieDev,
<!DOCTYPE html>

<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.sectionsCircle {
height: 300px;
width: 300px;
border-radius: 50%;
overflow: hidden;
display: flex;
border: 1px solid #800080;
justify-content: center;
margin: 0 auto;
}


.rictangle{
width: 100%;
height: 300px;
line-height: 300px;
text-align: center;
background-color: #808080;
flex: 1;
}

.rictangle:nth-child(2n) {
background-color: #800080;
}
.rictangle:hover{
color: #FFFFFF;
}

</style>

</head>

<body>
<div class='sectionsCircle'>
<div class=rictangle>1</div>
<div class=rictangle>2</div>
<div class=rictangle>3</div>
<div class=rictangle>4</div>
<div class=rictangle>5</div>
<div class=rictangle>6</div>
<div class=rictangle>7</div>
</div>


</body>
</html>