Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Круг из 7 частей (https://javascript.ru/forum/xhtml-html-css/82276-krug-iz-7-chastejj.html)

GeorgieDev 13.04.2021 08:57
Круг из 7 частей
 
<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
Цитата:
Сообщение от рони (Сообщение 535503)
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>


Часовой пояс GMT +3, время: 16:16.