CODEWITHSUNDEEP
javascripthtmlcss
Kyle
Kyle

Reputation: 67

Draw a circle with four segments

So, this question was posted for Androids, but I couldn't find anything relating to HTML/CSS/Javascript. How can I draw a circle with four different segments to interact with?

The level of interaction I'm looking for is simple enough - just something to accept hover and click commands. I've done a lot of looking and I can't come up with anything. I know how to create a circle, but not one with four different areas I can interact with. Can anyone help?

Upvotes: 1

Views: 144

Answers (3)

Amadan
Amadan

Reputation: 198324

.c {
  height: 20px;
  width: 20px;
  background-color: black;
  position: absolute;
}
.c:hover {
  background-color: red;
}
.tl {
  top: 0;
  left: 0;
  border-top-left-radius: 20px;
}
.tr {
  top: 0;
  left: 20px;
  border-top-right-radius: 20px;
}
.bl {
  top: 20px;
  left: 0;
  border-bottom-left-radius: 20px;
}
.br {
  top: 20px;
  left: 20px;
  border-bottom-right-radius: 20px;
}
<div class="c tl"></div><div class="c tr"></div><div class="c bl"></div><div class="c br"></div>

Upvotes: 1

ProllyGeek
ProllyGeek

Reputation: 15836

Do you mean something like this , the concept is pretty easy. 

.quarter-circle {
    background-color:#c06;
    height:150px;
    width: 150px;
    -moz-border-radius: 150px 0 0 0;
    border-radius: 150px 0 0 0;
}

just stick 4 quarters in 1 wrap div like this

HTML:

<div id="wrap">
<p class="quarter-circle"></p>
<p class="quarter-circle fliph"></p>
<p class="quarter-circle flipv"></p>
<p class="quarter-circle fliphv"></p>
</div>

CSS:

#wrap
{
    width:300px;
    height:300px;

}
.fliph
{
    -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
}
.flipv
{
    -moz-transform: scaleY(-1);
        -o-transform: scaleY(-1);
        -webkit-transform: scaleY(-1);
        transform: scaleY(-1);
        filter: FlipV;
        -ms-filter: "FlipV";
}
.fliphv
{
    -moz-transform: scaleY(-1);
        -o-transform: scaleY(-1);
        -webkit-transform: scaleY(-1);
        transform: scaleY(-1) scaleX(-1);
        filter: FlipV;
        -ms-filter: "FlipV";
}
.quarter-circle {
    margin:0px;
    background-color:#c06;
    height:150px;
    width: 150px;
    -moz-border-radius: 150px 0 0 0;
    border-radius: 150px 0 0 0;
    position:relative;
    display:inline-block;
    float:left;
}

Upvotes: 1

Yangguang
Yangguang

Reputation: 1785

html:

<a id="s1"></a>
<a id="s2"></a>
<a id="s3"></a>
<a id="s4"></a>

css:

a{
display:inline-block;
width:50px;
height:50px;
background:green;
}
a:hover{
background:blue;
}
#s1{
position:absolute;
top:0px;
left:0px;
border-top-left-radius:50px;
}
#s2{
position:absolute;
top:0px;
left:50px;
border-top-right-radius:50px;
}
#s3{
position:absolute;
top:50px;
left:0px;
border-bottom-left-radius:50px;
}
#s4{
position:absolute;
top:50px;
left:50px;
border-bottom-right-radius:50px;
}

demo

Upvotes: 3

Related Questions