如何創建邊有鏈接的圓圈我在試著做一個像這樣的圓圈這，這個..我成功了，但問題是，我需要每個橙色的一面是一個鏈接，我不能這樣做的邊界。如果有人能幫我這個忙，我會非常感激的。#circle {
width: 200px;
height: 200px;
border-radius: 50%;
background: green;}#incircle {
width: 100px;
height: 100px;
border-radius: 50%;
border: 50px dotted orange;}<div id="circle">
<div id="incircle"></div></div>
3 回答
MM們
TA貢獻1886條經驗 獲得超2個贊
svgarcsvg
.frag {
fill: #FFA500;
stroke: #FFFFFF;
transition: fill 0.3s ;}.center {
fill: #008000;}a:hover .frag {
fill: #FFC722;}text {
font-size: 17px;
fill: #FFFFFF;}<svg width="200" height="200" viewBox="-2 -2 202 203" shape-rendering="geometricPrecision"> <a xlink:href="#"><path class="frag" d="M100,100 v-100 a100,100 1 0,1 86.6025,50" /><text x="135" y="42.5" text-anchor="middle">1</text></a> <a xlink:href="#"><path class="frag" d="M100,100 l86.6025,-50 a100,100 1 0,1 0,100" /><text x="170" y="105" text-anchor="middle">2</text></a> <a xlink:href="#"><path class="frag" d="M100,100 l86.6025,50 a100,100 1 0,1 -86.6025,50" /><text x="135" y="170" text-anchor="middle">3</text></a> <a xlink:href="#"><path class="frag" d="M100,100 v100 a100,100 1 0,1 -86.6025,-50" /><text x="65" y="170" text-anchor="middle">4</text></a> <a xlink:href="#"><path class="frag" d="M100,100 l-86.6025,50 a100,100 1 0,1 0,-100" /><text x="27.5" y="105" text-anchor="middle">5</text></a> <a xlink:href="#"><path class="frag" d="M100,100 l-86.6025,-50 a100,100 1 0,1 86.0025,-50" /><text x="65" y="42.5" text-anchor="middle">6</text></a> <a xlink:href="#"><path class="center" d="M100,100 v-50 a50,50 1 0,1 0,100 a50,50 1 0,1 0,-100" /></a></svg>
svg.
.frag {
fill: #FFA500;
stroke: #FFFFFF;
transition: fill 0.3s ;}.center {
fill: #008000;}a:hover .frag {
fill: #FFC722;}text {
font-size: 17px;
fill: #FFFFFF;}<svg width="100" height="200" viewBox="-2 -2 202 203" shape-rendering="geometricPrecision" preserveAspectRatio="none"> <g id="circle"> <a xlink:href="#"><path class="frag" d="M100,100 v-100 a100,100 1 0,1 86.6025,50" /><text x="135" y="42.5" text-anchor="middle">1</text></a> <a xlink:href="#"><path class="frag" d="M100,100 l86.6025,-50 a100,100 1 0,1 0,100" /><text x="170" y="105" text-anchor="middle">2</text></a> <a xlink:href="#"><path class="frag" d="M100,100 l86.6025,50 a100,100 1 0,1 -86.6025,50" /><text x="135" y="170" text-anchor="middle">3</text></a> <a xlink:href="#"><path class="frag" d="M100,100 v100 a100,100 1 0,1 -86.6025,-50" /><text x="65" y="170" text-anchor="middle">4</text></a> <a xlink:href="#"><path class="frag" d="M100,100 l-86.6025,50 a100,100 1 0,1 0,-100" /><text x="27.5" y="105" text-anchor="middle">5</text></a> <a xlink:href="#"><path class="frag" d="M100,100 l-86.6025,-50 a100,100 1 0,1 86.0025,-50" /><text x="65" y="42.5" text-anchor="middle">6</text></a> <a xlink:href="#"><path class="center" d="M100,100 v-50 a50,50 1 0,1 0,100 a50,50 1 0,1 0,-100" /></a> </g></svg><svg width="200" height="100" viewBox="-2 -2 202 203" shape-rendering="geometricPrecision" preserveAspectRatio="none"> <use xlink:href="#circle" /></svg><svg width="150" height="150" viewBox="-2 -2 202 203" shape-rendering="geometricPrecision" preserveAspectRatio="none"> <use xlink:href="#circle" /></svg><svg width="100" height="100" viewBox="-2 -2 202 203" shape-rendering="geometricPrecision" preserveAspectRatio="none"> <use xlink:href="#circle" /></svg><svg width="50" height="50" viewBox="-2 -2 202 203" shape-rendering="geometricPrecision" preserveAspectRatio="none"> <use xlink:href="#circle" /></svg>
侃侃無極
TA貢獻2051條經驗 獲得超10個贊
純CSS方法
注意：使用偽元素可以顯著減少標記，而我目前還沒有使用偽元素。
12overflow: hidden;6
30deg360/12transform-origin: 50% 100%;
6
.cont, #bag {
height:200px;
width:400px;
overflow:hidden;}#one, #two, #three, #four, #five, #six {
height:400px;
width:400px;
border-radius:200px;}#bag > div {
position:relative;
transform-origin:50% 100%;}#one, #three, #five {
background-color:orange;}#one:hover, #three:hover, #five:hover {
background-color:gold;}#two, #four, #six {
background-color:forestgreen;}#bag > :nth-child(2) {
top:-200px;
-webkit-transform:rotate(30deg);
transform:rotate(30deg);}#bag > :nth-child(3) {
top:-400px;
transform:rotate(60deg);
transform:rotate(60deg);}#bag > div:nth-child(4) {
top:-600px;
-webkit-transform:rotate(90deg);
transform:rotate(90deg);}#bag > :nth-child(5) {
top:-800px;
-webkit-transform:rotate(120deg);
transform:rotate(120deg);}#bag > :nth-child(6) {
top:-1000px;
-webkit-transform:rotate(150deg);
transform:rotate(150deg);}#bag:nth-of-type(2){
transform:scale(-1);
transform-origin:50% 50%;}#green-center {
height:200px;
width:200px;
border-radius:50%;
background-color:forestgreen;
position: relative;
top:-300px;
left:100px;}<div id="bag"> <div class="cont"> <a href="http://example.com/"><div id="one"></div></a> </div> <div class="cont"> <div id="two">ABC</div> </div> <div class="cont"> <a href="http://example.com/"><div id="three"></div></a> </div> <div class="cont"> <div id="four"></div> </div> <div class="cont"> <a href="http://example.com/"><div id="five"></div></a> </div> <div class="cont"> <div id="six"></div> </div></div><div id="bag"> <div class="cont"> <a href="http://example.com/"><div id="one"></div></a> </div> <div class="cont"> <div id="two"></div> </div> <div class="cont"> <a href="http://example.com/"><div id="three"></div></a> </div> <div class="cont"> <div id="four"></div> </div> <div class="cont"> <a href="http://example.com/"><div id="five"></div></a> </div> <div class="cont"> <div id="six"></div> </div></div><div id="green-center">
- 3 回答
- 0 關注
- 485 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消