Question

我如何this使用CSS和Bootstrap？

离我最近的是this。

我正在使用Bootstrap的版本4。

代码：

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

使用CSS和Bootstrap 4的具有平滑边缘的自定义边框

2 个答案: