Пользовательская граница с гладкими краями с использованием CSS и Bootstrap 4

Question

Как мне это с CSS и Bootstrap?

Ближайшее, что я получил, было this .

Я с использованием версии 4 Bootstrap.

Код:

<div class="row text-center" style="height: 6.875vh;">
        <div class="col-4"></div>
        <div class="col-4">
            <a class="mw-100" id="like" href="#">
                <img class="rounded-circle border-2 border-purple" src="img/like.png" alt="Like" title="Like">
            </a>
        </div>
        <div class="col-4"></div>
    </div>

    <div class="row text-center bg-white" style="height: 11.71875vh;">
        <div class="col-4 my-auto text-right">
            <a id="prev" href="#carousel" role="button" data-slide="prev">
                <img class="mw-100" src="img/prev.png" alt="Anterior" title="Anterior">
                <span class="sr-only">Anterior</span>
            </a>
        </div>
        <div class="col-4"></div>
        <div class="col-4 my-auto text-left">
            <a id="next" href="#carousel" role="button" data-slide="next">
                <img class="mw-100" src="img/next.png" alt="Próximo" title="Próximo">
                <span class="sr-only">Próximo</span>
            </a>
        </div>
    </div>

Answer 1

Я бы сказал, что вы очень близки, и правильный подход, кажется,

• с границей круга (как у вас)
• с кругом поверх цветной полосы
• края, которые вы пропустили, можно заполнить треугольниками с каждой стороны изображения

Я всегда хотел сделать это ... спасибо, что спросили об этом :)

рабочий фрагмент ниже:

#backgroundPanel {
  width: 100vw;
  height: 50px;
  background: lightgreen;
}

#imageContainer {
  border-radius: 50%;
  border: 5px solid green;
  width: 55px;
  height: 55px;
  background-image: url('https://www.akberiqbal.com/favicon.ico');
  margin: auto;
  margin-top: -20px;
  z-index: 4;
}

#leftTriangle {
  position: absolute;
  z-index: 1;
  left: calc(50% - 45px);
  top: 50px;
  background: transparent;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid green;
  border-bottom: 10px solid transparent;
  border-top: 10px solid green;
}

#rightTriangle {
  position: absolute;
  z-index: 1;
  right: calc(50% - 45px);
  top: 50px;
  background: transparent;
  width: 0;
  height: 0;
  border-left: 10px solid green;
  border-right: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-top: 10px solid green;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<div id="leftTriangle"></div>
<div id="rightTriangle"></div>
<div id='backgroundPanel'></div>
<div id='imageContainer'> <img src="" /> </div>

Answer 2

Ответ Akber выше решил мою проблему

Я получил это:

#like {
    position: absolute;
    border-radius: 50%;
    z-index: 2;
    width: 86px;
    height: 86px;
    left: calc(50% - 43px);
    border-width: 10.75px;
    border-style: solid;
    border-color:#A11D5F;
    transform: translateY(8px);
}

#left-triangle {
    position: absolute;
    z-index: 1;
    left: calc(50% - 74px);
    top: calc(100% - 6px);
    background: transparent;
    width: 0;
    height: 0;
    border-left: 21.5px solid transparent;
    border-right: 21.5px solid #A11D5F;
    border-bottom: 21.5px solid transparent;
    border-top: 21.5px solid #A11D5F;
}

#right-triangle {       
    position: absolute;
    z-index: 1;
    right: calc(50% - 74px);
    top: calc(100% - 6px);
    background: transparent;
    width: 0;
    height: 0;
    border-left: 21.5px solid #A11D5F;
    border-right: 21.5px solid transparent;
    border-bottom: 21.5px solid transparent;
    border-top: 21.5px solid #A11D5F;
}

<div class="row text-center remove" style="height: 43px;">
    <div class="col-4"></div>
    <div class="col-4" id="like-content">
        <div id="left-triangle"></div>
        <div id="right-triangle"></div>
        <a href="#">
            <img id="like" src="img/like.png" alt="Like" title="Like">
        </a>
    </div>
    <div class="col-4"></div>
</div>

<div class="row text-center bg-white remove" style="height: 11.71875vh;">
    <div class="col-4 my-auto text-right">
        <a id="prev" href="#carousel" role="button" data-slide="prev" style="">
            <img class="mw-100" src="img/prev.png" alt="Anterior" title="Anterior">
            <span class="sr-only">Anterior</span>
        </a>
    </div>
    <div class="col-4"></div>
    <div class="col-4 my-auto text-left">
        <a id="next" href="#carousel" role="button" data-slide="next">
            <img class="mw-100" src="img/next.png" alt="Próximo" title="Próximo">
            <span class="sr-only">Próximo</span>
        </a>
    </div>
</div>