Question

所以，这个问题是针对Androids发布的，但我找不到任何与HTML / CSS / Javascript相关的内容。如何绘制一个包含四个不同段的圆圈来与之交互？

我正在寻找的互动水平非常简单 - 只需接受悬停和点击命令。我做了很多看，我无法想出任何东西。我知道如何创建一个圆圈，但不知道我可以与之交互的四个不同区域。有人可以帮忙吗？

Answer 1

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

Answer 2

你的意思是 this ，这个概念非常简单。

<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>

在 this

等1个包装div中坚持4个季度

<强> HTML：

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

<强> CSS：

visit(root_path)

Answer 3

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

绘制一个包含四个线段

3 个答案: