Чтобы определить несколько областей (без полигональной формы) на веб-странице

Question

Мне было интересно, можно ли определить несколько областей на веб-странице. Я не говорю о классическом прямоугольном делении (сделанном «div»), но что-то еще: определить области различных форм, возможно, не многоугольные, как, например, на рисунке ниже.

Я не знаю много вещей:

• Я не знаю, если это возможно;
• Я не знаю, является ли это хорошей практикой в ​​соответствии с теорией создания GUI;
• Я не знаю, если бы на нем можно было построить нечто подобное, оно также совместимо с большинством браузеров (я не против).

Построение такой страницы, может быть, сумасшедшая вещь, и, по моей неопытности, я не знаю. Я просто пытаюсь понять потенциальность и пределы html и css в этом смысле.

спасибо.

Answer 1

Вы можете создать круг DIV с помощью CSS таким образом (к примеру):

.circle { 
    border-radius: 50%; 
} 

.circle1 { 
    width: 100px; 
    height: 100px; 
    background: yellow; 
    border: 3px solid red; 
} 
.circle2 { 
    width: 50px; 
    height: 50px; 
    background: #ccc; 
    border: 3px solid #000; 
} 

и присвоить этот CSS в ваших DIVs:

<div class="circle circle1"></div> 

<div class="circle circle2"></div> 

Answer 2

Большинство элементов представляют собой прямоугольники, но есть такие опции, как «border-radius», чтобы элемент выглядел и вел себя как круг. Просто Google для «CSS кругов»; вы найдете блоги следующим образом: http://davidwalsh.name/css-circles

Другой более сложный и мощный способ использования «холста» в HTML5. Вы можете определить свои пользовательские формы, просто найдите этот сайт: http://www.w3schools.com/html/html5_canvas.asp

И последнее, но не менее важное - вы можете использовать изображения SVG. Я не знаю, что вы собираетесь делать, но в некоторых случаях (просто для отображения масштабируемых элементов без взаимодействия) он отлично работает.

Answer 3

Старая школа способ делать карты, ... изображение, но в целом сайт не выполнимые стандарты был AFAIK