时间戳

首页 > 解决方案 > Bootstrap中的联锁圆圈div问题

html - Bootstrap中的联锁圆圈div问题

问题描述

我正在使用圆形和矩形 div 在 Bootstrap 中创建这个图表 - 我唯一的问题是我需要在一条线上有两个圆形 div - 在中间像 ven 图表一样互锁，

我应该使用相对定位还是绝对定位？

我也可以使用多重混合吗？

这是 HTML 标记


            <div class="white-grad" style="--b:12px;--c:linear-gradient(140deg,red,yellow,green)">
            </div>
            <div class="white-grad" style="--b:12px;--c:linear-gradient(140deg,red,yellow,green); margin-bottom: 40px">
            </div>

这是我到目前为止的CSS：


.white-grad {
  --b:12px;  /* border width*/

  color: #313149;
  display: block;
  margin: auto;
  width:150px;
  position:relative;
  z-index:0;
}
.white-grad:after {
  content:"";
  display:inline-block;
  padding-top:100%;
}
.white-grad:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background: var(--c,linear-gradient(to right, #9c20aa, #fb3570));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--b) - 1px),#fff calc(100% - var(--b)));
          mask:radial-gradient(farthest-side,transparent calc(100% - var(--b) - 1px),#fff calc(100% - var(--b)));
  border-radius:50%;
}

非常感谢，

标签： htmlcsstwitter-bootstrap

解决方案

所以我要做的是给他们每个人一个单独的 ID，然后你可以将其中一个转移到另一个上。还要让它们同时使用，display: inline-block;而不是仅仅将它们并排放置。看看我在这里做了什么：

.white-grad {
  --b:12px;  /* border width*/
  color: #313149;
  display: inline-block;
  margin: auto;
  width:150px;
  position:relative;
  z-index:0;
}
.white-grad:after {
  content:"";
  display:inline-block;
  padding-top:100%;
}
.white-grad:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background: var(--c,linear-gradient(to right, #9c20aa, #fb3570));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--b) - 1px),#fff calc(100% - var(--b)));
          mask:radial-gradient(farthest-side,transparent calc(100% - var(--b) - 1px),#fff calc(100% - var(--b)));
  border-radius:50%;
}


#grad2 {
  right: 50px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


            <div class="white-grad" id="grad1" style="--b:12px;--c:linear-gradient(140deg,red,yellow,green)">
            </div>
            <div class="white-grad" id="grad2" style="--b:12px;--c:linear-gradient(140deg,red,yellow,green); margin-bottom: 40px">
            </div>

推荐阅读