half circle links on edges/sides of page - html

Question

I have the following code which makes 2 links in circles on the right and left of the page.
[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>
I only want to show half circles with the link centered inside

Answer 1

Something like this?
Make a circle and then use position to place it half way down the div and half to the left/right
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

Looks like you want to center of those circles to be on the edges of the pages. If so, you'll have to adjust for 50% of the width of you circles.
With '...' as your link, you can see in chrome that you have a total computed width of 101px.
Knowing that, you can just change your CSS like so...
.nav-previous { left: -50px; }
.nav-next { right: 50px;}