主页 / 问题 / 1175266
Accepted
PRO CODE
Asked:2020-09-07 21:22:19 +0800 CST2020-09-07 21:22:19 +0800 CST

如何制作一个由四段组成的圆？

  • 772

有必要做一个圆圈，就像这里一样。要求它由 4 个部分（单个元素）组成，以便可以将事件分配给它们。

html

2 个回答

  1. SVG 选项

    悬停时，扇区会使用创建阴影的 SVG 过滤器突出显示。
    添加了链接和提示。当您将光标放在扇区上时，它们就会出现。

    path:hover {
filter:url(#drop-shadow);
}
    <svg width="300" height="300" viewBox="-5 -5 220 220" >
 <defs>  
     <!-- Фильтр для создании тени при наведении -->
<filter id="drop-shadow" x="-20%" y="-20%" height="130%" width="130%" >
      <feGaussianBlur in="SourceAlpha" stdDeviation="4"/> 
      <feOffset dx="2" dy="2" result="offsetblur"/> 
      <feMerge> 
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/> 
      </feMerge>
    </filter>
</defs> 
      <!-- Белый круг с тенью -->
<circle cx="103" cy="103" r="102" fill="white" filter="url(#drop-shadow)" opacity="0.5"/> 
 <g transform="translate(100,100) rotate(45 0 0)" >
   <a xlink:href="#"> 
     <title> #1. Первый сектор </title>
    <path class="path1" d="M0 0-70-70A99 99 0 0 1 70-70Z" fill="#FF998D"/>
    </a> 
    <a xlink:href="#"> 
     <title> #2. Второй сектор </title>
     <path class="path2" d="M0 0 70-70A99 99 0 0 1 70 70Z" fill="#D7EB72"/> 
     </a>
      <a xlink:href="#"> 
        <title> #3. Третий сектор </title> 
      <path class="path3" d="M0 0 70 70A99 99 0 0 1-70 70Z" fill="#FEF584"/>
      </a>
      <a xlink:href="#"> 
        <title> #4. Четвертый сектор </title> 
       <path class="path4" d="M0 0-70 70A99 99 0 0 1-70-70Z" fill="#77BCFF"/> 
      </a> 
  </g>
</svg>

    • 5
  2. Best Answer

    好吧，这很简单，什么对你不起作用？

    .roundBlock {
    background: #fff;
    position: relative;
    float: left;
    margin-right: 3em;
    width: 302px;
    height: 295px;
    -webkit-border-radius: 150px 150px 150px 150px;
    border-radius: 150px 150px 150px 150px;
    -moz-box-shadow: 2px 1px 12px #aaa;
    -webkit-box-shadow: 2px 1px 12px #aaa;
    -o-box-shadow: 2px 1px 12px #aaa;
    box-shadow: 2px 1px 12px #aaa;
}

.roundBlock ul{
margin:0;
padding:0;
}

.red:hover, .blue:hover, .yellow:hover, .green:hover {
    border: 2px solid black;
}

.red, .blue, .yellow, .green {
    opacity: 0.6;
    height: 290px;
    -webkit-border-radius: 150px 150px 150px 150px;
    border-radius: 150px 150px 150px 150px;
    position: absolute;
    text-indent: 10000px;
}


.red {
    background: #FF5643;
    clip: rect(0px, 300px, 150px, 150px);
    width: 296px;
}

.blue {
    background: dodgerblue;
    clip: rect(0px, 150px, 150px, 0px);
    width: 300px;
}

.yellow {
    background: #FEEF33;
    clip: rect(150px, 150px, 300px, 0px);
    width: 300px;
}

.green {
    background: #BEDE15;
    clip: rect(150px,300px, 300px, 150px);
    width: 296px;
}
    <div class="roundBlock">
            <ul>
                <li class="red" data-tile="1"></li>
                <li class="blue" data-tile="2"></li>
                <li class="yellow" data-tile="3"></li>
                <li class="green" data-tile="4"></li>
            </ul>
        </div>

    • 3

相关问题