Как я могу сделать блок таким? ⇐ Html

[Anonymous]

Привет,
Я пытаюсь воссоздать визуальную компоновку, похожую на то, что в прикрепленном экране. Он состоит из нескольких концентрических эллипсов с логотипами (изображениями), аккуратно размещенными внутри каждого эллипса. Вот упрощенная версия того, чего я хочу достичь, теперь я создал только эллипсы и не знаю, какой лучший вариант для полока логотипа, например, на экране: < /p>
Несколько эллипсов (или овальных фигур), нарисованных на экране < /p>
, помещенные в каждую ellipse, не совпадают < /p> < /p> . Логотипы, все центрированы в форме < /p>




Layered Diagram

.diagram-container {
position: relative;
width: 100%;
max-width: 1230px;
height: 600px;
display: flex;
align-items: flex-end;
justify-content: center;
margin: 0 auto;
}

.layer {
position: absolute;
border: 1px solid rgba(255, 0, 0, 0.8);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transform-origin: center bottom;
transform: scaleY(0.3);
bottom: 0;
left: 50%;
}

.label {
background-color: rgb(230, 243, 255);
padding: 6px 16px;
border-radius: 16px;
font-size: 14px;
color: rgba(0, 0, 0, 0.8);
white-space: nowrap;
position: absolute;
transform: scaleY(3.33);
top: 0;
margin-top: -12px;
}







const layers = ['Infrastructure', 'Payments', 'Exchanges', 'Wallets']; // Customize if needed

const baseSize = 250;
const increment = 330;
const container = document.getElementById('diagram');

layers.forEach((layer, index) => {
const layerDiv = document.createElement('div');
const layerIndex = layers.length - index;

const size = baseSize + (layerIndex * increment);
layerDiv.className = 'layer';
layerDiv.style.width = `${size}px`;
layerDiv.style.height = `${size}px`;
layerDiv.style.marginLeft = `${-size / 2}px`;

const labelSpan = document.createElement('span');
labelSpan.className = 'label';
labelSpan.textContent = layer;

layerDiv.appendChild(labelSpan);
container.appendChild(layerDiv);
});







Подробнее здесь: https://stackoverflow.com/questions/795 ... -like-this