Создание прямоугольника, содержащего круглые кнопки, размер которых изменяется в зависимости от размера прямоугольника.

Question

У меня вопрос из нескольких частей. (Я использую React)

1) Я пытаюсь создать компонент HTML / CSS, который выглядит как приложение Ma c (то есть прямоугольник с закругленными углами и панель задач с 3 круглые кнопки сверху)

Сейчас у меня есть:

<div className='bash'>
  <div className='taskbar'>
     <div className='close-button button'></div>
     <div className='minimise-button button'></div>
     <div className='maximise-button button'></div>
   </div>
   <div className='main-window'></div>
</div>

С CSS:

.bash {
    height: 21%;
    width: 40%;
    background-color: white;
    border-radius: 10px;
}

.bash>.taskbar {
    border-radius: 10px 10px 0 0;
    background-color: #d8d8d8;
    height: 10%;
    width: 100%;
}

.bash>.taskbar>.button {
    background: red;
    width: 10%;
    height: 10%;
    border-radius: 50%;
}

Это создает

Когда я хочу, чтобы он выглядел больше как

То есть, я хочу, чтобы круги были относительно размера панели задач и рядом с каждым другие, а не друг на друга. Я пытался использовать% для высоты и ширины кнопок, но безрезультатно, так как я могу заставить это работать?

(Я воспроизвел нечто подобное в codepen )

2) Я новичок в работе фронтенд-разработчиков, поэтому предполагал, что я создам форму, используя HTML и CSS, но только что слышал кое-что о SVG. Могу ли я использовать тег SVG для создания этого ресурса? И если да, то почему это рекомендуется по сравнению с тем, как я это делаю? (И если у вас есть рекомендации по учебным ресурсам, это было бы здорово: D)

Спасибо за вашу помощь

Answer 1

1) Используя текущий код, вы можете достичь того, чего хотите.

.bash {
    height: 100px;
    width: 400px;
    background-color: black;
    border-radius: 10px;
}

.bash>.taskbar {
    box-sizing: border-box; /* this is new */
    border-radius: 10px 10px 0 0;
    background-color: #d8d8d8;
    width: 100%;
    display: flex; /* this is new */
    padding: 16px; /* this is new */
}

.bash>.taskbar>.button {
    background: red;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

/* this is new */
.bash>.taskbar>.button + .button {
    margin-left: 4px;
}

2) Я не знаю, где вы это слышали, но HTML + CSS - предпочтительный способ go, SVG для масштабируемой графики

Answer 2

Есть разные способы сделать это: макет flexbox, div float, макет сетки.

.bash>.taskbar {
    border-radius: 10px 10px 0 0;
    background-color: #d8d8d8;
    height: 10%;
    width: 100%;
    display: flex; // Add flexbox
}

flexbox guid: ссылка