如何创建与边界边链接的圆如何创建与边界边链接的圆(How to create a circle wi

2019-05-10 11:03发布

站内文章 / 前沿技术
37 0 0

我试图使像一个圆这个 。 我能使其在小提琴，但问题是，我需要每一个橙色侧是一个链接，我无法与边框做。 如果有人能帮助我，我将非常感激。 

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

Answer 1:

创建与段的圆的关键是找到沿这将在SVG中使用的圆点path元素作为坐标。 圆上的查找点可以很容易地使用三角公式，如果我们知道的角度来完成。

X坐标点的=圆的半径* cos（角度以弧度表示）+ X坐标中心点的

的Y坐标点的=圆的半径* SIN（角度以弧度表示）+ Y坐标中心点的

角度以弧度表示=角以度* Math.PI / 180

角度取决于没有。 那我们要创建段。 通式为（360 /无。段）。 因此，为了产生具有6个区段，每个区段的覆盖将是60度的角度的圆。 第一部分将从0至60度从60度至120度等覆盖，第二。

圈的演示与6段：

下面的表显示了点是如何用6段的圆计算出的（其中，圆的半径是50，中心点是55,55）：

一旦点计算，编码path本身很简单。 路径应该开始，在中心点（即50,50）结束，从中心点，我们应该先画一条线从点，并从那里划出一道弧线向到点。 下面是一个怎么样path将如下所示： 

<path d='M55,55 L105,55 A50,50 0 0,1 80,98.30z' />


 svg { height: 220px; width: 220px; } path { fill: transparent; stroke: black; } 
 <svg viewBox='0 0 110 110'> <path d='M55,55 L105,55 A50,50 0 0,1 80,98.30z' /> <path d='M55,55 L80,98.30 A50,50 0 0,1 30,98.30z' /> <path d='M55,55 L30,98.30 A50,50 0 0,1 5,55z' /> <path d='M55,55 L5,55 A50,50 0 0,1 30,11.69z' /> <path d='M55,55 L30,11.69 A50,50 0 0,1 80,11.69z' /> <path d='M55,55 L80,11.69 A50,50 0 0,1 105,55z' /> </svg>

圈的演示与12段：

对于具有12段的圆，每个段将覆盖30度并且因此点将如在下面的表来计算： 

 svg { height: 220px; width: 220px; } path { fill: transparent; stroke: black; } 
 <svg viewBox='0 0 110 110'> <path d='M55,55 L105,55 A50,50 0 0,1 98.30,80z' /> <path d='M55,55 L98.30,80 A50,50 0 0,1 80,98.30z' /> <path d='M55,55 L80,98.30 A50,50 0 0,1 55,105z' /> <path d='M55,55 L55,105 A50,50 0 0,1 30,98.30z' /> <path d='M55,55 L30,98.30 A50,50 0 0,1 11.69,80z' /> <path d='M55,55 L11.69,80 A50,50 0 0,1 5,55z' /> <path d='M55,55 L5,55 A50,50 0 0,1 11.69,30z' /> <path d='M55,55 L11.69,30 A50,50 0 0,1 30,11.69z' /> <path d='M55,55 L30,11.69 A50,50 0 0,1 55,5z' /> <path d='M55,55 L55,5 A50,50 0 0,1 80,11.69z' /> <path d='M55,55 L80,11.69 A50,50 0 0,1 98.30,30z' /> <path d='M55,55 L98.30,30 A50,50 0 0,1 105,55z' /> </svg>

圆与未分割的内侧部分：

如果它应该看起来好像在中心圆（半径较小）的部分看起来不分段，如果该内部部分不必是透明的 ，只是在SVG中末尾添加一个额外的圆形元素。 

 svg { height: 220px; width: 220px; } path { fill: transparent; stroke: black; } circle { fill: yellowgreen; stroke: black; } 
 <svg viewBox='0 0 110 110'> <path d='M55,55 L105,55 A50,50 0 0,1 80,98.30z' /> <path d='M55,55 L80,98.30 A50,50 0 0,1 30,98.30z' /> <path d='M55,55 L30,98.30 A50,50 0 0,1 5,55z' /> <path d='M55,55 L5,55 A50,50 0 0,1 30,11.69z' /> <path d='M55,55 L30,11.69 A50,50 0 0,1 80,11.69z' /> <path d='M55,55 L80,11.69 A50,50 0 0,1 105,55z' /> <circle cx='55' cy='55' r='25' /> </svg>

不同的背景对于每个段：

如果每个片段都应该有不同的背景，他们则只是添加fill属性，每个path元素。 

 svg { height: 220px; width: 220px; } path { stroke: black; } circle { fill: yellowgreen; stroke: black; } 
 <svg viewBox='0 0 110 110'> <path d='M55,55 L105,55 A50,50 0 0,1 80,98.30z' fill='crimson' /> <path d='M55,55 L80,98.30 A50,50 0 0,1 30,98.30z' fill='tomato' /> <path d='M55,55 L30,98.30 A50,50 0 0,1 5,55z' fill='sandybrown' /> <path d='M55,55 L5,55 A50,50 0 0,1 30,11.69z' fill='mediumseagreen' /> <path d='M55,55 L30,11.69 A50,50 0 0,1 80,11.69z' fill='chocolate' /> <path d='M55,55 L80,11.69 A50,50 0 0,1 105,55z' fill='teal' /> <circle cx='55' cy='55' r='25' /> </svg>

演示用透明内部部分：

如果中央部分不能有纯色，然后因为我们不能再开始和结束的中央点的路径，整个事情变得更加复杂。 在这种情况下，我们必须找到两个外圆和像下面的内圆点：

在这种情况下， path必须从“从（内）”，并在相同点结束时开始，从开始行应被吸引到“从（外）”，则产生电弧，以“向（外）”，一行“向（内）”，并产生电弧，以“从（内）”。 

 svg { height: 220px; width: 220px; } path { fill: transparent; stroke: black; } 
 <svg viewBox='0 0 110 110'> <path d='M80,55 L105,55 A50,50 0 0,1 80,98.30 L67.5,76.65 A25,25 0 0,0 80,55z' /> <path d='M67.5,76.65 L80,98.30 A50,50 0 0,1 30,98.30 L42.5,76.65 A25,25 0 0,0 67.5,76.65z' /> <path d='M42.5,76.65 L30,98.30 A50,50 0 0,1 5,55 L30,55 A25,25 0 0,0 42.5,76.65z' /> <path d='M30,55 L5,55 A50,50 0 0,1 30,11.69 L42.5,33.34 A25,25 0 0,0 30,55z' /> <path d='M42.5,33.34 L30,11.69 A50,50 0 0,1 80,11.69 L67.5,33.34 A25,25 0 0,0 42.5,33.34z' /> <path d='M67.5,33.34 L80,11.69 A50,50 0 0,1 105,55 L80,55 A25,25 0 0,0 67.5,33.4z' /> </svg>

使每个段可点击的链接：

这是非常简单，一旦本身的形状已创建办。 就像chipChocolate.py的回答，只是包装一个SVG锚标记中的每个路径（ <a xlink:href="#">其中#应更换链接页面的URL）。 

 svg { height: 220px; width: 220px; } path { fill: transparent; stroke: black; } 
 <svg viewBox='0 0 110 110'> <a xlink:href="#"><path d='M55,55 L105,55 A50,50 0 0,1 80,98.30z' /></a> <a xlink:href="#"><path d='M55,55 L80,98.30 A50,50 0 0,1 30,98.30z' /></a> <a xlink:href="#"><path d='M55,55 L30,98.30 A50,50 0 0,1 5,55z' /></a> <a xlink:href="#"><path d='M55,55 L5,55 A50,50 0 0,1 30,11.69z' /></a> <a xlink:href="#"><path d='M55,55 L30,11.69 A50,50 0 0,1 80,11.69z' /></a> <a xlink:href="#"><path d='M55,55 L80,11.69 A50,50 0 0,1 105,55z' /></a> </svg>

添加形状中的文本：

除了文本在SVG稍微复杂一些，因为我们必须再次指定文本应放置点。 如果文字是相当小的（说了几个字符），那么我们就可以再次找到圆上的点，使得角度恰恰是在段的中间，并用它。 半径可被设置为使得它是半父圆的半径（如果没有未分段部分）或者使得其内圆和外圆之间的中途。 该text-anchor ， dominant-baseline是通过CSS添加的设置将确保文本被定位以这样的方式，无论是文本的水平和垂直中心与指定的点相匹配。

如果文本是大的（并且需要环绕），那么额外的处理应该做的事，因为SVG内容中text标签将不会自动缠。

点计算为具有6段和没有中央未分割区圆：

点计算为具有6段和中央未分割区圆： 

 svg { height: 220px; width: 220px; } path { fill: transparent; stroke: black; } text { text-anchor: middle; dominant-baseline: middle; /* doesn't work in IE */ font: 12px Calibri, Arial; } 
 <svg viewBox='0 0 110 110'> <path d='M55,55 L105,55 A50,50 0 0,1 80,98.30z' /> <text x='76.65' y='67.5'>1</text> <path d='M55,55 L80,98.30 A50,50 0 0,1 30,98.30z' /> <text x='55' y='80'>2</text> <path d='M55,55 L30,98.30 A50,50 0 0,1 5,55z' /> <text x='33.4' y='67.5'>3</text> <path d='M55,55 L5,55 A50,50 0 0,1 30,11.69z' /> <text x='33.4' y='42.5'>4</text> <path d='M55,55 L30,11.69 A50,50 0 0,1 80,11.69z' /> <text x='55' y='30'>5</text> <path d='M55,55 L80,11.69 A50,50 0 0,1 105,55z' /> <text x='76.65' y='42.5'>6</text> </svg> <svg viewBox='0 0 110 110'> <path d='M55,55 L105,55 A50,50 0 0,1 80,98.30z' /> <text x='87.47' y='73.75'>1</text> <path d='M55,55 L80,98.30 A50,50 0 0,1 30,98.30z' /> <text x='55' y='92.5'>2</text> <path d='M55,55 L30,98.30 A50,50 0 0,1 5,55z' /> <text x='22.52' y='73.75'>3</text> <path d='M55,55 L5,55 A50,50 0 0,1 30,11.69z' /> <text x='22.52' y='36.25'>4</text> <path d='M55,55 L30,11.69 A50,50 0 0,1 80,11.69z' /> <text x='55' y='17.5'>5</text> <path d='M55,55 L80,11.69 A50,50 0 0,1 105,55z' /> <text x='87.47' y='36.25'>6</text> <circle cx='55' cy='55' r='25' /> </svg>

动态创建的JavaScript：

下面是为了动态创建段粗略基于JS实现。 该函数有四个参数 - 圆的圆心的X坐标，在Y中心坐标，圆和不半径。 段/切片。 

 var fromAngle, toAngle, fromCoordX, fromCoordY, toCoordX, toCoordY, path, d; function createPie(cx, cy, r, slices) { for (var i = 0; i < slices; i++) { path = document.createElementNS("http://www.w3.org/2000/svg", "path"); fromAngle = i * 360 / slices; toAngle = (i + 1) * 360 / slices; fromCoordX = cx + (r * Math.cos(fromAngle * Math.PI / 180)); fromCoordY = cy + (r * Math.sin(fromAngle * Math.PI / 180)); toCoordX = cx + (r * Math.cos(toAngle * Math.PI / 180)); toCoordY = cy + (r * Math.sin(toAngle * Math.PI / 180)); d = 'M' + cx + ',' + cy + ' L' + fromCoordX + ',' + fromCoordY + ' A' + r + ',' + r + ' 0 0,1 ' + toCoordX + ',' + toCoordY + 'z'; path.setAttributeNS(null, "d", d); document.getElementById('pie').appendChild(path); } } createPie(55, 55, 50, 6); 
 svg { height: 220px; width: 220px; } path { fill: transparent; stroke: black; } 
 <svg viewBox="0 0 110 110" id="pie"></svg>

JS样品不覆盖与未分段内圆的示例，而是可以通过扩展这个来实现。



Answer 2:

你可以使用svg的arc s到创建截面和svg “的链接锚小号（相当于HTML锚标签）的标签。 

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



Answer 3:

CSS-唯一的方法

注：标记可以通过使用pseudoelements，这是我目前没有使用被显著减少。

您可以使用SVG，但是这也可以只使用CSS和HTML进行。

我所做的就是创建12半圆（通过添加overflow: hidden;父容器）。 然后，我创建的单独的组6半圆。

在中心处的角度应30deg各（ 360/12 ）。 为了实现这一目标，我们必须从原来的圆的圆心旋转的半圆。 我们可以做到这一点与transform-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">

在Firefox， 谷歌Chrome和IE浏览器输出：



Answer 4:

你可以使用的地图，就像这样： 

 #circle{ position:relative; width:200px; height:200px; border-radius:50%; background:green; } #mappinglink{ position:absolute; top:0px; left:0px; } #incircle{ width:100px; height:100px; border-radius:50%; border:50px dotted orange; border-spacing: 10px 50px; } 
 <div id="circle"> <div id="incircle"></div> <img id="mappinglink" width="200" height="200" usemap="#mymap" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/> <map name="mymap"> <area alt="" title="" href="#" shape="poly" coords="29,28,71,3,84,50,64,64" style="outline:none;" target="_self" /> <area alt="" title="" href="#" shape="poly" coords="148,12,122,55,142,73,184,46" style="outline:none;" target="_self" /> <area alt="" title="" href="#" shape="poly" coords="149,96,199,93,192,142,146,121" style="outline:none;" target="_self" /> <area alt="" title="" href="#" shape="poly" coords="105,149,128,141,159,180,112,200" style="outline:none;" target="_self" /> <area alt="" title="" href="#" shape="poly" coords="59,133,79,147,65,193,23,164" style="outline:none;" target="_self" /> <area alt="" title="" href="#" shape="poly" coords="48,87,50,108,3,120,4,71" style="outline:none;" target="_self" /> </map> </div>



Answer 5:

试试这个纯CSS： 

 *{box-sizing: border-box;padding: 0; margin: 0} nav,nav:before{ border-radius:50%; background:green } nav{ width:200px; height:200px; margin: 40px auto; position: relative; overflow: hidden } nav:before{ content: ''; position:absolute; top: 50%; left: 50%; width: 100px; height: 100px; z-index: 2; transform: translate3d(-50%,-50%,0) } #incircle{ width:100px; height:100px; border-radius:50%; border:50px dotted orange; } nav a{ position: absolute; z-index: 1; cursor: pointer; width: 0px; height: 0px; border-top: 30px solid transparent; border-bottom: 30px solid transparent } nav a:nth-child(3),nav a:nth-child(4){ left: 70px; border-left: 30px solid transparent; border-right: 30px solid transparent } nav a:first-child{ top: 70px; left: 0; border-left: 100px solid orange } nav a:nth-child(2){ left: 20px; border-left: 100px solid orange; top: 20px; transform: rotateZ(60deg); } nav a:nth-child(3){ transform: rotateZ(30deg); top: 0px; left: 86px; border-top: 100px solid orange; } nav a:nth-child(4){ left: 46px; border-bottom: 100px solid orange; bottom: -4px; transform: rotateZ(28deg); } nav a:nth-child(5){ right: 24px; border-right: 100px solid orange; bottom: 20px; transform: rotateZ(60deg); } nav a:last-child{ top: 70px; right: 0; border-right: 100px solid orange } 
 <nav> <a></a> <a></a> <a></a> <a></a> <a></a> <a></a> </nav>



Answer 6:

这里有一个小提琴。

HTML 

<div id="circle">
    <a id='left' href='left'></a>
    <a id='right' href='right'></a>
    <div id="mid"></div>
</div>

CSS 

#circle{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
}

a {
    height: 100%;
    width: 49%;
    background: orange;
    display: block;
}

#left {
    float: left;
}

#right {
    float: right;
}

#mid {
    border-radius: 50%;
    background: green;
    border: 4px solid white;
    position: absolute;
    display: block;
    height: 50%;
    width: 50%;
    left: 24%;
    top: 24%;
}

这可以通过分割了而轻易地扩展到4份而不是2 a的垂直。 不过我建议你看看像RaphaelJS 。 你甚至可以欺骗，并使用一个饼图 ！



Answer 7:

我试图用纯CSS，而与此想出了： 

 .wrap { height: 200px; width: 200px; background: red; border-radius: 50%; position: relative; overflow: hidden; } .wrap:after { position: absolute; height: 50%; width: 50%; content: ""; border-radius: 50%; background: green; left: 25%; top: 25%; } .slice { height: 0; width: 0; border-left: 200px solid blue; border-top: 200px solid transparent; position: absolute; top: -100px; left: -100px; } .part2 { border-left: 200px solid red; border-top: 200px solid transparent; transform: rotate(180deg); top: -100px; left: -100px; } .part3 { border-left: 200px solid pink; border-top: 200px solid transparent; transform: rotate(90deg); top: -100px; left: 100px; } 
 <div class="wrap"> <a href="#" class="slice"></a> <div class="slice part2"></div> <a href="#" class="slice part3"></a> </div>

然而，这是使用“边界绝招”来生成蓝格，而这会使得它的一部分点击。 不过，我觉得这个调整时， 可以工作。

  • 或者，如果你有兴趣/开放使用SCSS 这个
  • 或者，你可以使用这个作为你设计的基础

就像是

 var items = document.querySelectorAll('.circle a'); for(var i = 0, l = items.length; i < l; i++) { items[i].style.left = (50 - 35*Math.cos(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%"; items[i].style.top = (50 + 35*Math.sin(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%"; } document.querySelector('.menu-button').onclick = function(e) { e.preventDefault(); document.querySelector('.circle').classList.toggle('open'); } 
 @import "http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"; body { background: #39D; } .circular-menu { width: 250px; height: 250px; margin: 0 auto; position: relative; } .circle { width: 250px; height: 250px; opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); transform: scale(0); -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .open.circle { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } .circle a { text-decoration: none; color: white; display: block; height: 40px; width: 40px; line-height: 40px; margin-left: -20px; margin-top: -20px; position: absolute; text-align: center; } .circle a:hover { color: #eef; } .menu-button { position: absolute; top: calc(50% - 30px); left: calc(50% - 30px); text-decoration: none; text-align: center; color: #444; border-radius: 50%; display: block; height: 40px; width: 40px; line-height: 40px; padding: 10px; background: #dde; } .menu-button:hover { background-color: #eef; } /* Author stuff */ h1.author { text-align:center; color: white; font-family: Helvetica, Arial, sans-serif; font-weight: 300; } h1.author a { color: #348; text-decoration:none; } h1.author a:hover { color: #ddd; } 
 <nav class="circular-menu"> <div class="circle"> <a href="" class="fa fa-home fa-2x"></a> <a href="" class="fa fa-facebook fa-2x"></a> <a href="" class="fa fa-twitter fa-2x"></a> <a href="" class="fa fa-linkedin fa-2x"></a> <a href="" class="fa fa-github fa-2x"></a> <a href="" class="fa fa-rss fa-2x"></a> <a href="" class="fa fa-pinterest fa-2x"></a> <a href="" class="fa fa-asterisk fa-2x"></a> </div> <a href="" class="menu-button fa fa-bars fa-2x"></a> </nav>



Answer 8:

这听起来像是对SVG的工作。 它有自己的类型<a>元素可以包含任意形状。



文章来源: How to create a circle with links on border side
标签： html css css3 svg css-shapes
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~