Центрируйте один фиксированный элемент «стрелка» внутри другого фиксированного элемента «кружок»

Question

У меня проблемы с центрированием стрелки внутри красного круга.Как я могу центрировать один фиксированный элемент внутри другого фиксированного элемента?

JsFiddle: https://jsfiddle.net/sebastian3495/xtj9cga2/4/

Код

html, body {
  height: 1000px;
  width: 100%;
}
#a {
  width: 100%;
  height: 100%;
  border: 1px solid black;
  position:relative;
}
#wrapper {
  position: absolute;
  top: 50vh;
}
#b {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: red;
  position: fixed;
}
#c {
  border: solid black;
  border-width: 0 3px 3px 0;
  position: fixed;
  width: 50px;
  height: 50px;
  transform: rotate(-45deg);
}

<div id="a">
  <div id="wrapper">
    <i id="b"></i>
    <i id="c"></i>
  </div>
</div>

Answer 1

Вы можете просто ввести свой код, как показано ниже, затем вы можете легко отцентрировать свою стрелку, а также настроить размер:

.arrow {
  background:red;
  width:100px;
  height:100px;
  border-radius:50%;
  position:fixed;
  top:100px;
  left:50px;
}
.arrow::before {
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:50%;
  height:50%;
  border-top:3px solid;
  border-right:3px solid;
  /*75% instead of 50% since we need to center half the shape so 50% then 25%*/
  transform:translate(-75%,-50%) rotate(45deg);
  
}

<div class="arrow"></div>

Вы можете упростить еще больше без псевдоэлемента:

.arrow {
  width:100px;
  height:100px;
  padding:35px 35px 0 0;
  border-radius:50%;
  position:fixed;
  top:100px;
  left:50px;
  background:
    linear-gradient(#000,#000) top right/77% 3px,
    linear-gradient(#000,#000) top right/3px 77%,
    red;
  background-repeat:no-repeat;
  background-origin:content-box;
  transform:rotate(45deg);
  box-sizing:border-box;
}

<div class="arrow"></div>

Answer 2

Отрегулируйте верхнюю и левую позиции для тега i с id = "c"

#c {
    border: solid black;
    border-width: 0 3px 3px 0;
    position: fixed;
    width: 50px;
    height: 50px;
    left:3%;
    top:60vh;
    transform: rotate(-45deg);
}