CODEWITHSUNDEEP
htmlcsscss-shapes
superpuccio
superpuccio

Reputation: 12972

To define several areas (with no polygonal shape) in a web page

I was wondering if it was possible to define several areas in a web page. I'm not talking about the classic rectangular division (made by "div"), but something more: to define areas of various shapes, maybe not polygonal, as, for instance, in the picture below.

web page divided in not polygonal shapes

I don't know lots of things:

Building a page like this, maybe, is a crazy thing and, in my inexperience, I don't know. I'm just trying to understand the potentiality and the limits of html and css in this sense.

Thank you.

Upvotes: 0

Views: 75

Answers (3)

userveryenthusiast90
userveryenthusiast90

Reputation: 36

You can create circle DIV using CSS this way (for example):

.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;
}

and usign this CSS in your DIVs:

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

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

Upvotes: 2

Astronaut
Astronaut

Reputation: 7051

Old School way of doing that... image maps, but a whole site not feasible standards was afaik

Upvotes: 2

Stefan Brendle
Stefan Brendle

Reputation: 1564

Most elements are rectangles, but there are options like "border-radius" to make an element look and behave like a circle. Just google for "CSS Circles"; you will find blogs like this: http://davidwalsh.name/css-circles

Another more complex and powerful way is using "canvas" in HTML5. You can define your custom shapes, just look for this site: http://www.w3schools.com/html/html5_canvas.asp

Last but not least you can use SVG images. I don't know, what you're going to do, but in some cases (just for displaying scaleable elements without interaction) it works great.

Upvotes: 1

Related Questions