在頁面的邊緣/邊上的半圓鏈接

Question

我有下面的代碼，在頁面的左側和右側創建2個圓圈的鏈接。

[class*="navigation"] .nav-previous, 
 
[class*="navigation"] .nav-next { 
 
    position: fixed; 
 
    z-index: 999; 
 
    top: 50%; 
 
    text-align: center; 
 
} 
 
[class*="navigation"] .nav-previous { 
 
    left: 0px; 
 
} 
 
[class*="navigation"] .nav-next { 
 
    right: 0px; 
 
} 
 
[class*="navigation"] .nav-previous a, 
 
[class*="navigation"] .nav-next a { 
 
    position: absolute; 
 
    display: inline-block; 
 
    font-size: 1.75em; 
 
    white-space: nowrap; 
 
    padding: 35px 40px; 
 
    color: #222; 
 
    border-radius: 50%; 
 
    background-color: #000; 
 
} 
 
[class*="navigation"] .nav-previous a { 
 
    transform: translateY(-50%) rotate(-90deg) translateX(50%) translateY(50%); 
 
    transform-origin: right 50%; 
 
    right: 2px; 
 
} 
 
[class*="navigation"] .nav-next a { 
 
    transform: translateY(-50%) rotate(90deg) translateX(-50%) translateY(50%); 
 
    transform-origin: left 50%; 
 
    left: 2px; 
 
}

<div class="nav-previous"> 
 
    <a>...</a> 
 
</div> 
 

 
<div class="nav-next"> 
 
    <a>...</a> 
 
</div>

我只想顯示半個圈與中心的內部鏈接

Answer 1

像這樣的事情？

一個圈，然後用position到一半時div和半放置到左/右

body { 
 
    background: #333; 
 
    height: 100vh; 
 
} 
 
.container { 
 
    background: #666; 
 
    height: 100%; 
 
    width: 100%; 
 
    position: relative; 
 
} 
 
.slider_nav { 
 
    background: #eee; 
 
    display: inline-block; 
 
    padding: 20px 20px 20px 40px; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
} 
 
.prev { 
 
    padding: 20px 20px 20px 50px; 
 
    top: calc(50% - 20px); 
 
    left: -50px; 
 
} 
 
.next { 
 
    padding: 20px 50px 20px 20px; 
 
    top: calc(50% - 20px); 
 
    right: -50px; 
 
}

<div class="container"> 
 
    <div class="slider_nav prev"><span> < </span> 
 
    </div> 
 
    <div class="slider_nav next"><span> > </span> 
 
    </div> 
 
</div>

Answer 2

貌似要將這些圓的中心是在頁面的邊緣。如果是這樣，你將不得不調整50％的圈子寬度。

用'...'作爲鏈接，您可以在chrome中看到總計算寬度爲101px。

知道了，你可以改變你的CSS是這樣的...

.nav-previous { left: -50px; } .nav-next { right: 50px;}