Add a circle between two vertical div in HTML - html

Question

How can I add a circle on top of two vertical div in HTML? I succeed in having 2 vertical boxes:
but I cannot figure out how to have a circle in the middle like the following:
The goal is to have a white circle with a blue line and being able to add a logo in the circle. I have the following code snippet:
http://jsfiddle.net/wL9xoad3/
.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>

Answer 1

You can use a ::before or an ::after pseudo element with an empty content and some positioning. You can set the width and height of the new element and add some border-radius to make it a circle. Don't forget to set position: relative on the .cta-half element so you can move the circle relative to this.
You can add the following to your snippet on jsfiddle, it should work:
.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;
}
If you want to add a logo in the circle, you can update your content and add a url(). I'd probably grab the svg version of the logo and encode it using this tool. It will convert the image and use it like this:
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");
You can also add some padding to make the logo smaller.
Result: