Форум

GeorgieDev · #1 (**permalink**) 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 равных частей?

рони · #2 (**permalink**) 13.04.2021, 11:18

GeorgieDev,
может svg?

GeorgieDev · #3 (**permalink**) 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, но вопрос, как лучше? Или есть другие идеи. Буду рад услышать)

рони · #4 (**permalink**) 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>

рони · #5 (**permalink**) 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>

Форум

Справочник

Discord чат

Курсы javascript