1

I want to draw a figure like this in my html. I need to draw just ONE annular sector because my circle can consists of different number of different sectors.

enter image description here

I can draw an annular sector using canvas or SVG, but how to do it in css?

UPDATE

This is my solution but I have problems with borders. Can anybody help me?

.circle {
    background: #aaa;
    position: relative;
    width: 200px;
    height: 200px;
    overflow: hidden;
    border-radius: 50%;
    border: 1px solid red;
}
.center {
    position: absolute;
    left: 50px;
    top: 50px;
    width: 100px;
    height: 100px;
    z-index: 100;
    background: #eee;
    border-radius: 50%;
    border: 1px solid red;
    opacity: 1;
}

.item {
    background: #aaa;
    overflow: hidden;
    position: absolute;
    width: 100px;
    height: 100px;
    transform-origin: 100% 100%;
    border: 1px solid red;
    opacity: 1
}

.item {
    z-index: 1;
    transform: rotate(60deg);
}
.item:nth-child(2) {
    z-index: 2;
    transform: rotate(120deg);
}
.item:nth-child(3) {
    z-index: 3;
    transform: rotate(180deg);
}
.item:nth-child(4) {
    z-index: 4;
    transform: rotate(240deg);
}
.item:nth-child(5) {
    z-index: 5;
    transform: rotate(300deg);
}
.item-wrapper {
    position: absolute;
    width: 100px;
    height: 100px;
    overflow: hidden;
    transform-origin: 100% 100%;
    border: 1px solid blue;
}
.item-wrapper > .item {
    z-index: 12;
    transform: rotate(-30deg);
}
.sector{
    background: #ddd;
    overflow: hidden;
    position: absolute;
    width: 100px;
    height: 100px;
    transform-origin: 100% 100%;
    border: 1px solid green;
    transform: rotate(-30deg);   
}
.sector:nth-child(2){
    transform: rotate(30deg);  
}
.item-wrapper > .item > .sector {
    transform: rotate(-30deg);
}
.item-wrapper > .item > .sector:nth-child(2) {
    transform: rotate(60deg);
}

.sector:hover {
    background: #eee
}
    <div class="circle">
        <div class="item">
            <div class="sector">1</div>
            <div class="sector">2</div>
        </div>
        <div class="item">
            <div class="sector">3</div>
            <div class="sector">4</div>
        </div>
        <div class="item">
            <div class="sector">5</div>
            <div class="sector">6</div>
        </div>
        <div class="item">
            <div class="sector">7</div>
            <div class="sector">8</div>
        </div>
        <div class="item">
            <div class="sector">9</div>
            <div class="sector">10</div>
        </div>
        <div class="item-wrapper">
            <div class="item">
            <div class="sector">11</div>
            <div class="sector">12</div>
            </div>
        </div>
        <div class="center">
        </div>
    </div>
Vitone
  • 498
  • 1
  • 7
  • 19
  • Have a look at [this answer](http://stackoverflow.com/questions/27943053/how-to-create-a-circle-with-links-on-border-side/27963109#27963109). (The one by The Pragmatick which is a CSS only approach). – Harry Jul 07 '15 at 10:28
  • is there a specific reason you need to do this with CSS rather than svg or canvas? – web-tiki Jul 07 '15 at 10:30
  • @Harry, my question is absolutely different, I need to draw just ONE annular sector because my circle can consists of different number of different sectors – Vitone Jul 07 '15 at 11:36
  • @Vitone: Sorry but what exactly would "one annual sector" be? Would it not be a circle? Also, the image given in question doesn't seem much different (maybe barring the no. of sectors) – Harry Jul 07 '15 at 11:40
  • My circle must be much more complex than as in picture. It consists of many annular sectors that have different colors. So I need to draw many sectors with different properties (color, angles). And my question is: is it possibility to do it using html and css without canvas and svg? – Vitone Jul 07 '15 at 11:50
  • 1
    @Vitone if you want to draw one sector with CSS, the linked dupe provides a solution. If it still doesn't suit you, please add more info to your question so we can understand what you mean exactly. – web-tiki Jul 07 '15 at 11:55
  • Thanks! I think I can draw a circle that consists of at least 12 same sectors that make something like a grid and using of borders on different bounds would make sectors with different dimensions. But I can't draw border where I want (blue color): [link](http://jsfiddle.net/d9ds465c/) – Vitone Jul 07 '15 at 13:11

0 Answers0