页面边缘/侧面的半圆链接

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

看起来您希望这些圆圈的中心位于页面的边缘。如果是这样，您将需要调整圆圈宽度的50％。

以'...'作为链接，您可以在Chrome中看到总计算宽度为101px。

知道这一点，你可以改变你的CSS ...

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

Answer 2

这样的东西？

制作一个圆圈，然后使用position将它放在div的一半，将一半放在左/右

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;