I was unsuccessful in creating a suitable Fiddle or codepen for this, so I'm hoping this information is enough within Inspector to give an idea of where I'm trying to go with this.

Is there any way to align these perfectly so that just the caret in the middle of the icon is white?

CodePudding user response：

Use ::before together with ::after.

Example:

* {
    box-sizing: border-box;
}

.bg {
    background-color: rgba(0, 0, 0, 0.6);
    padding: 10px;
    position: relative;
    height: 100px;
    width: 300px;
}

.mybtn {
    color: #008ed4;
    display: block;/* required */
    font-size: 40px;/* for font awesome or font icon size */
    height: 40px;/* required */
    left: 50%;/* for positioning on center, middle */
    position: absolute;/* for positioning on center, middle */
    text-decoration: none;
    transform: translate(-50%, -50%);/* for positioning on center, middle */
    top: 50%;/* for positioning on center, middle */
    width: 40px;/* required */
}
.mybtn::before {
    background-color: #fff;
    border-radius: 50%;
    content: "";
    display: block;
    height: 30px;/* required, must smaller than icon size */
    left: 50%;/* required */
    position: absolute;/* required */
    top: 50%;/* required */
    transform: translate(-50%, -50%);/* required for center, middle white background */
    width: 30px;/* required, must smaller than icon size */
    z-index: 1;/* required for put background to bottom layer */
}
.mybtn::after {
    content: "\f144";/* for font awesome icon */
    font-family: "Font Awesome 5 Free";/* for font awesome icon */
    font-weight: 900;/* for font awesome icon */
    position: absolute;/* required */
    z-index: 2;/* required for pull icon to top layer */
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
<div class="bg">
    <a class="mybtn" href="#"></a>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Both ::before and ::after start with their own position from the top, left of their element. You have to position them properly and use z-index to layer them.
The white background layer must be smaller than the icon layer to prevent it look like the borders.

See it in action on jsfiddle.

CodePudding user response：

You can try out this simple solution in just HTML, CSS

.slider-container{
  height: 4rem;
  width: 4rem;
  background: #008ED4;
  border-radius:50%;
  display:flex;
  justify-content:center;
  align-items:center;
}

.caret{
  width: 0;
  height: 0;
  margin-left:0.3rem;
  border-top: 1rem solid transparent;
  border-left: 2rem solid #fff;
  border-bottom: 1rem solid transparent;
}

<div class="slider-container">
  <div class="caret"></div>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Also, to make any shape easily in CSS, try out Reference