在HTML中的两个垂直div之间添加一个圆圈

debugcn 发表于 Dev

梅尔

如何在HTML的两个垂直div顶部添加圆圈？我成功安装了2个垂直框：

但我不知道如何在中间像下面这样一个圆：

目的是要有一个带有蓝线的白色圆圈，并能够在该圆圈中添加徽标。我有以下代码片段：

.html {
  height: 100%;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

.body {
  background-color: #000;
  font-family: "Open Sans", sans-serif;
  height: 100%;
}

.vidyard_padding {
  height: 100%;
}

.vc {
  display: table;
  height: 100%;
  width: 100%;
}

.vc-inner {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.cta {
  background-color: #fff;
  height: 360px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  width: 640px;
}

.cta-full {
  height: 100%;
  width: 100%;
}

.cta-half {
  float: left;
  height: 100%;
  width: 50%;
}

.cta-block {
  display: table;
  height: 100%;
  width: 100%;
}

.cta-block-inner {
  display: table-cell;
  padding: 20px;
  text-align: center;
  vertical-align: middle;
}

.cta-block p {
  line-height: 1.4125;
  margin: 0;
}

.cta-block p.white {
  color: #FFFFFF;
}

.cta-block p+.btn {
  margin-top: 10px;
}

.cta-block .btn {
  background-color: #414142;
  border-radius: 2px;
  color: #FFFFFF;
  display: inline-block;
  font-size: 10px;
  letter-spacing: 1px;
  padding: 8px 12px;
  text-decoration: none;
}

.cta-block .btn:hover {
  background-color: #313132;
}

<div class="cta-half">
  <div class="cta-block" style="background-color:#FFFFFF;">
    <div class="cta-block-inner">
      <p class="black">Watch our Quick Start</p>
      <a class="btn" href="https://google.com">Quick Start</a> </div>
  </div>
</div>


<div class="cta-half">
  <div class="cta-block" style="background-color:#47b2ffff;">
    <div class="cta-block-inner">
      <p class="white">Start in the Cloud</p>
      <a class="btn" href="https://google.com">Cloud</a> </div>
  </div>
</div>

Zsolt Meszaros

您可以将::before或::after伪元素使用为空content且具有一定的位置。您可以设置width和height新的元素，并添加一些border-radius使它成为一个圆圈。不要忘记position: relative在.cta-half元素上进行设置，以便您可以相对于此移动圆。

您可以在jsfiddle的代码段中添加以下内容，它应该可以正常工作：

.cta-half {
  position: relative;
}

.cta-half:last-of-type::after {
  background-color: #fff;
  border-radius: 50%;
  border: 2px solid #47b2ff;
  content: '';
  height: 50px;
  left: 0;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
}

如果您想在圈子中添加徽标，则可以更新content并添加url()。我可能会抓住徽标的svg版本并使用此工具对其进行编码。它将转换图像并像这样使用它：

content: url("data:image/svg+xml,%0A%3Csvg viewBox='0 0 533.5 544.3' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M533.5 278.4c0-18.5-1.5-37.1-4.7-55.3H272.1v104.8h147c-6.1 33.8-25.7 63.7-54.4 82.7v68h87.7c51.5-47.4 81.1-117.4 81.1-200.2z' fill='%234285f4'/%3E%3Cpath d='M272.1 544.3c73.4 0 135.3-24.1 180.4-65.7l-87.7-68c-24.4 16.6-55.9 26-92.6 26-71 0-131.2-47.9-152.8-112.3H28.9v70.1c46.2 91.9 140.3 149.9 243.2 149.9z' fill='%2334a853'/%3E%3Cpath d='M119.3 324.3c-11.4-33.8-11.4-70.4 0-104.2V150H28.9c-38.6 76.9-38.6 167.5 0 244.4l90.4-70.1z' fill='%23fbbc04'/%3E%3Cpath d='M272.1 107.7c38.8-.6 76.3 14 104.4 40.8l77.7-77.7C405 24.6 339.7-.8 272.1 0 169.2 0 75.1 58 28.9 150l90.4 70.1c21.5-64.5 81.8-112.4 152.8-112.4z' fill='%23ea4335'/%3E%3C/svg%3E");

您还可以添加一些padding使徽标更小。

结果：