I have two sticky boxes. On hovering over a particular area inside the sticky boxes a popup opens. I want these popups to appear always on top of the sticky boxes. But increasing the z index of one hides the other. Any solution ?
Note - Removing sticky from the boxes and keeping z index of both the box same solves the problem but I need the boxes to be sticky.
.box {
margin: 40px;
padding: 20px;
background: yellow;
border: 1px solid red;
position: sticky;
}
.innerBox {
width: 100px;
height: 50px;
background: lightgreen;
position: relative;
}
.popup1 {
position: absolute;
width: 50px;
height: 150px;
top: 25px;
left: 35px;
background: red;
display: none;
}
.popup2 {
position: absolute;
width: 50px;
height: 150px;
bottom: 25px;
left: 35px;
background: black;
display: none;
}
.box1:hover .popup1 {
display: block;
}
.box2:hover .popup2 {
display: block;
}
.boxUp {
z-index: 3;
}
.boxDown {
z-index: 3;
}
<div>
<div class="box boxUp">
<div class="innerBox box1">
<p>
Hover Here
</p>
<div class="popup1">
</div>
</div>
</div>
<div class="box boxDown">
<div class="innerBox box2">
<p>
Hover Here
</p>
<div class="popup2">
</div>
</div>
</div>
</div>
Set the z-index on hover the .box
.box {
margin: 40px;
padding: 20px;
background: yellow;
border: 1px solid red;
position: sticky;
}
.innerBox {
width: 100px;
height: 50px;
background: lightgreen;
position: relative;
}
.popup1 {
position: absolute;
width: 50px;
height: 150px;
top: 25px;
left: 35px;
background: red;
display: none;
}
.popup2 {
position: absolute;
width: 50px;
height: 150px;
bottom: 25px;
left: 35px;
background: black;
display: none;
}
.box1:hover .popup1 {
display: block;
}
.box2:hover .popup2 {
display: block;
}
.box:hover {
z-index: 2;
}
<div>
<div class="box boxUp">
<div class="innerBox box1">
<p>
Hover Here
</p>
<div class="popup1">
</div>
</div>
</div>
<div class="box boxDown">
<div class="innerBox box2">
<p>
Hover Here
</p>
<div class="popup2">
</div>
</div>
</div>
</div>
Related
I created a layout with 4 columns centered with margin and a triangle as an arrow-down with a star in the middle...
this is working nice in my computer:
But triangle and star are far away to be responsive, only way I achieved to position it correctly is with absolute position:
.triangle-down {
display: block;
position: absolute;
top: 0;
left: 318px;
width: 0;
height: 0;
border-left: 532px solid transparent;
border-right: 532px solid transparent;
border-top: 400px solid blue;
}
.star {
display: block;
position: absolute;
vertical-align: middle;
font-size: 250px;
text-align: center;
color: white;
top: -434px;
left: -109px;
}
How can I put the element in top of the others and make it responsive in the same way columns and it's margins?
NOTES:
layout is a countdown, but javascript is not important for the question.
You can find a functional (no JS) fiddle here
You can see actual result (with JS) here
I can use sass if necessary
How about this updated fiddle?
https://jsfiddle.net/ondrakoupil/0rtvcnon/11/
Basically, these are the changes:
use flexbox for column layout
sizes are measured using viewport-relative units (vw)
triangle is created as standard rectangular <div> and rotated via CSS - you have better control over its position and size
There are some CSS3 techniques used. For IE, you'll need to prefix them in CSS (use Autoprefixer). Other browsers should handle it "as it is".
html, body {
height: 100%;
margin: auto;
padding-left:1%;
background: yellow;
font: normal 16px 'Roboto', sans-serif;
}
.container {
margin: auto;
width: 80%;
height: 100%;
position: relative;
display: flex;
justify-content: space-between;
}
.bar {
background: red;
font-weight: 700;
text-align: center;
color: yellow;
width: 15%;
}
.init {
position:absolute;
bottom: 10px;
right: 20px;
background: yellow;
margin-left: 0px;
font-weight: 700;
text-align: right;
color: red;
}
a:link, a:visited {
color: red;
text-decoration: none;
}
::-moz-selection {
color: yellow;
background: red;
}
::selection {
color: yellow;
background: red;
}
p.numbers {
font-size: 8vw;
margin-top: 45vw;
margin-bottom: 20px;
}
p.meta, p.strings {
font-size: 2vw;
}
h1 {
font-size: 4.5em;
}
.triangle-down {
position: absolute;
top: 0;
left: 0;
right: 0;
pointer-events: none;
}
.triangle-color {
margin: auto;
width: calc(80vw / 1.4142);
height: calc(80vw / 1.4142); /* sqrt of 2 */
background-color: blue;
transform: translateY(calc(-1 * 80vw / 1.4142 / 2)) rotate(45deg);
}
.star {
position: absolute;
vertical-align: middle;
font-size: 15vw;
text-align: center;
color: white;
top: 5vw;
left: 0;
right: 0;
z-index: 1;
}
<body>
<div class="container">
<div class="triangle-down">
<div class="triangle-color"></div>
<div class="star">★</div>
</div>
<div class="bar">
<p id="d" class="numbers days">00</p>
<p class="strings">DIES</p>
</div>
<div class="bar">
<p id="h" class="numbers hours">00</p>
<p class="strings">HORES</p>
</div>
<div class="bar">
<p id="m" class="numbers minutes">00</p>
<p class="strings">MINUTS</p>
</div>
<div class="bar">
<p id="s" class="numbers seconds">00</p>
<p class="strings">SEGONS</p>
</div>
</div>
<div class="init">
ENTRA
</div>
</body>
Take a look at this. I was need to rewrite it from scratch, because you've got a lot of absolutes and they all calculated through js, as I understood. Hope, this will satisfy your requirements.
html, body {
margin: 0;
height: 100%;
}
.container {
width: 100%;
height: 100%;
background-color: yellow;
font: normal 16px 'Roboto', sans-serif;
position: relative;
}
.triangle-aspect-keeper {
width: 50%;
padding-bottom: 50%;
position: relative;
margin-left: auto;
margin-right: auto;
}
.triangle-container {
}
.triangle-down {
width: 100%;
height: 100%;
background-color: blue;
transform: rotate(45deg);
position: absolute;
top: -50%;
left: 0;
}
.star {
font-size: 1100%;
text-align: center;
color: white;
width: 100%;
line-height: 200%; /* control star vertical position */
position: absolute;
top: 0;
left: 0;
}
.bar-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
}
.bar-inner-container {
margin-left: auto;
margin-right: auto;
width: calc(50% * 1.41); /* sqrt(2) = 1.41. Length of the diagonal of the square*/
height: 100%;
display: flex;
justify-content: space-between;
}
.bar:first-child {
margin-left: 0;
}
.bar {
background-color: red;
height: 100%;
width: 15%;
color: yellow;
font-weight: 700;
}
p.numbers {
font-size: 5em;
margin-top: 350%;
}
p.meta, p.strings {
font-sie: 1.5em;
}
a:link, a:visited {
color: red;
text-decoration: none;
}
.init {
position: absolute;
bottom: 0;
right: 0;
padding: 10px;
font-weight: 700;
}
<body>
<div class="container">
<div class="bar-container">
<div class="bar-inner-container">
<div class="bar bar-first">
<p id="d" class="numbers days">00</p><br>
<p class="strings">DIES</p><br>
</div>
<div class="bar bar-second">
<p id="h" class="numbers hours">00</p><br>
<p class="strings">HORES</p><br>
</div>
<div class="bar bar-third">
<p id="m" class="numbers minutes">00</p><br>
<p class="strings">MINUTS</p><br>
</div>
<div class="bar bar-fourth">
<p id="s" class="numbers seconds">00</p><br>
<p class="strings">SEGONS</p><br>
</div>
</div>
</div>
<div class="triangle-aspect-keeper">
<div class="triangle-container">
<div class="triangle-down"></div>
<div class="star">★</div>
</div>
</div>
<div class="init">
ENTRA
</div>
</div>
</body>
#import url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css');
html,
body {
background: yellow;
height: 100%;
}
.container {
position: relative;
height: 100%;
}
.row {
height: 100%;
}
.col-xs-3 {
height: 100%;
}
.col-xs-3,
.col-xs-12 {
padding: 0 6.25%;
}
.bar {
color: yellow;
background: red;
min-height: 100%;
padding-top: 333%;
}
.triangle-down {
position: absolute;
width: 100%;
height: auto;
z-index: 1;
}
.triangle-color {
margin-bottom: -30%;
}
.triangle-color * {
fill: blue
}
.star * {
fill: white
}
.numbers {
font-size: 5vw;
padding-bottom: 2vw;
}
.strings {
font-size: 1.5vw;
}
<div class="container text-center">
<div class="row triangle-down">
<div class="col-xs-12">
<svg class="triangle-color" viewBox="0 0 100 40">
<polygon points="0,0 100,0 50,40"/>
</svg>
<svg class="star" viewBox="0 0 1400 188">
<polygon points="700,0 640,188 790,68 610,68 760,188"/>
</svg>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<div class="bar">
<div class="numbers">00</div>
<div class="strings">DIES</div>
</div>
</div>
<div class="col-xs-3">
<div class="bar">
<div class="numbers">00</div>
<div class="strings">HORES</div>
</div>
</div>
<div class="col-xs-3">
<div class="bar">
<div class="numbers">00</div>
<div class="strings">MINUTS</div>
</div>
</div>
<div class="col-xs-3">
<div class="bar">
<div class="numbers">00</div>
<div class="strings">SEGONS</div>
</div>
</div>
</div>
</div>
You can simply do this.
HTML:
<div class="parent">
<div class="triangle">
<div class="star">
...
</div>
</div>
</div>
CSS:
.parent {
width: xx%; /*Whatever percentage*/
height: yy%; /*Whatever percentage*/
margin: 0 auto;
position: relative;
}
.triangle {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.star {
font-size: xx%; /*some percentage (assuming star is a font icon)*/
position: absolute;
top: 15vh;
margin: 0 auto;
}
This is easiest to understand when running the code below. I'm looking to trigger the hover state on both a column and the middle row when hovering over the red bar.
I'd like to keep the columns based on flex and have the bar absolutely positioned over them.
Is this possible?
EDIT:
I'd like just the column that the mouse is hovering over to turn blue. Sorry for the ambiguity. Snippet updated with desired result.
The columns are divided by a white line. Hover over a grey area to see the column highlighted.
Thanks.
.root {
width: 100px;
height: 100px;
background: grey;
position: relative;
display: flex;
}
.column {
display: flex;
flex: 1 1 auto;
border-right: 1px solid white;
}
.column:hover {
background: blue;
}
.bar {
position: absolute;
left: 0;
right: 0;
top: 33px;
bottom: 33px;
background: red;
}
.bar:hover {
background: green;
}
.green {
background: green;
}
.blue {
background: blue;
}
Hover over the middle of the square. I want the middle column to turn blue and the bar to turn green.
Right now, only the bar turns green.
<div class='root'>
<div class='column'>
</div>
<div class='column'>
</div>
<div class='column'>
</div>
<div class='bar'>
</div>
</div>
Desired result:
<div class='root'>
<div class='column'>
</div>
<div class='column blue'>
</div>
<div class='column'>
</div>
<div class='bar green'>
</div>
</div>
Final Edit:
I'm providing a fully fleshed out version of what my use case is. I don't think CSS will be able to solve this, but I've accepted an answer that works for my original question.
function enterColumn() {
document.getElementById('column-status').innerHTML = 'In column'
}
function leaveColumn() {
document.getElementById('column-status').innerHTML = 'Out of column'
}
function enterBar() {
document.getElementById('bar-status').innerHTML = 'In bar'
}
function leaveBar() {
document.getElementById('bar-status').innerHTML = 'Out of bar'
}
.root {
width: 100px;
height: 100px;
background: grey;
position: relative;
display: flex;
}
.column {
display: flex;
flex: 1 1 auto;
border-right: 1px solid white;
}
.column:hover {
background: blue;
}
.bar-container {
position: absolute;
left: 0;
right: 0;
top: 33px;
bottom: 33px;
}
.bar {
position: absolute;
top: 0;
bottom: 0;
background: red;
}
.bar:hover {
background: green;
}
.green {
background: green;
}
.blue {
background: blue;
}
Hovering over a column or bar should be independent. Right now you can never have the 'In column' and 'In bar' status at the same time :(
<br />
It should scale to support any number of columns and any number of bars (where bars can be absolutely positioned anywhere along the x-axis)
<br />
Javascript events should be called on mouse events for both columns and bars.
<div class='root'>
<div class='column' onmouseenter='enterColumn();' onmouseleave='leaveColumn()'>
</div>
<div class='column' onmouseenter='enterColumn();' onmouseleave='leaveColumn()'>
</div>
<div class='column' onmouseenter='enterColumn();' onmouseleave='leaveColumn()'>
</div>
<div class='bar-container'>
<div class='bar' style='left: 5px; right: 40px' onmouseenter='enterBar();' onmouseleave='leaveBar()'>
</div>
<div class='bar' style='left: 65px; right: 5px' onmouseenter='enterBar();' onmouseleave='leaveBar()'>
</div>
</div>
</div>
<div id='column-status'>
Out of column
</div>
<div id='bar-status'>
Out of bar
</div>
There you go, after 2 hours of trial and error I finally came up with this little hack.
.root {
width: 100px;
height: 100px;
background: grey;
position: relative;
display: flex;
}
.column {
display: flex;
flex: 1 1 auto;
border-right: solid #fff 1px;
}
.column:hover {
background: blue;
}
.column .toggle{
margin-top:33px;
height: 33px;
width: 100%;
}
.column .toggle:before{
content: "";
position: absolute;
width: 34px;
height: 33px;
}
.column .toggle:hover:after{
content: "";
position: absolute;
z-index: 10;
left: 0;
right: 0;
top: 33px;
bottom: 33px;
background: green;
pointer-events:none;
}
.bar {
position: absolute;
z-index: 1;
left: 0;
right: 0;
top: 33px;
bottom: 33px;
background: red;
pointer-events:none;
}
<div class='root'>
<div class='column'><div class='toggle'></div></div>
<div class='column'><div class='toggle'></div></div>
<div class='column'><div class='toggle'></div></div>
<div class='bar'></div>
</div>
Now if you need to bind some javascript events to the .bar element, attach them to .toggle instead.
If rearrangement of divs is allowed, you can position the .bar just before the middle .column and use adjacent sibling selector.
.bar:hover + .column {
background: blue;
}
.root {
width: 100px;
height: 100px;
background: grey;
position: relative;
display: flex;
}
.column {
display: flex;
flex: 1 1 auto;
border-right: 1px solid white;
}
.column:hover {
background: blue;
}
.bar {
position: absolute;
left: 0;
right: 0;
top: 33px;
bottom: 33px;
background: red;
}
.bar:hover {
background: green;
}
.bar:hover + .column {
background: blue;
}
.green {
background: green;
}
.blue {
background: blue;
}
<div class='root'>
<div class='column'>
</div>
<div class='bar'>
</div>
<div class='column'>
</div>
<div class='column'>
</div>
</div>
If I understand what you mean, you mean that if you hover over any element the .column should turn blue and .bar should turn green. If that's the case then actually its pretty simple. Just place your hover event on .root element instead like so:
.root {
width: 100px;
height: 100px;
background: grey;
position: relative;
display: flex;
}
.column {
display: flex;
flex: 1 1 auto;
border-right: 1px solid white;
}
.bar {
position: absolute;
left: 0;
right: 0;
top: 33px;
bottom: 33px;
background: red;
}
.root:hover .bar {
background: green;
}
.root:hover .column {
background: blue;
}
<div class='root'>
<div class='column'>
</div>
<div class='column'>
</div>
<div class='column'>
</div>
<div class='bar'>
</div>
</div>
If that' not the case and you want the color of the .column to change when you hover over the .bar then check out the snippet below. Note that I've a changed the HTML markup a bit. Since .bar has position: absolute so it won't affect at all where you place it inside the .root element.
.root {
width: 100px;
height: 100px;
background: grey;
position: relative;
display: flex;
}
.column {
display: flex;
flex: 1 1 auto;
border-right: 1px solid white;
}
.bar {
position: absolute;
left: 0;
right: 0;
top: 33px;
bottom: 33px;
background: red;
}
.bar:hover {
background: green;
}
.bar:hover ~ .column {
background: blue;
}
<div class='root'>
<div class='bar'>
</div>
<div class='column'>
</div>
<div class='column'>
</div>
<div class='column'>
</div>
</div>
Let me know if that helps you :-)
How could I go about constructing something like this with pure CSS?
This is how far I've gotten so far: Fiddle
I'm struggling with how to get that rounded corner there, even if I continue to add additional spans.
CODE:
body {
background: #000;
}
.container {
position: relative;
width: 300px;
height: 150px;
margin: 10% auto;
}
.top-right {
position: absolute;
top: -10px;
right: 0;
width: 50px;
height: 1px;
background: white;
border-radius: 5px;
}
.box {
width: 100%;
height: 100%;
background: red;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
}
h3 {
color: white;
}
<div class="container">
<span class="top-right"></span>
<div class="box">
<h3>Content</h3>
</div>
</div>
you can achieve that by using pseudo elements ::before/::after in .box using the properties border and border-radius
body {
background: #000;
}
.container {
width: 300px;
height: 150px;
margin: 3% auto 0 /* changed for demo */
}
h3 {
color: white;
}
.box {
width: 100%;
height: 100%;
background: red;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.box::before,
.box::after {
content: "";
position: absolute;
border: solid white;
width: 50px;
height: 50px;
}
.box::before {
top: -15px;
left: -15px;
border-radius: 15px 0; /* top-left */
border-width: 5px 0 0 5px;
}
.box::after {
bottom: -15px;
right: -15px;
border-radius: 0 0 15px; /* bottom-right */
border-width: 0 5px 5px 0;
}
<div class="container">
<div class="box">
<h3>Content</h3>
</div>
</div>
Using pseudo-elements would be the ideal solution.
This answer is just an alternative. Although not semantically elegant, it's crudely effective.
Create a container with four divs.
The first div will be the white border.
The last div will be your red box.
The two divs in the middle will be used to conceal areas of the white border.
The HTML is quite simple:
<div class="container">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4">
<h3>Content</h3>
</div>
</div>
With absolute positioning, .box2 (green) and .box3 (blue) can be moved to cover the border.
The order of the boxes in the source doesn't really matter. But with the HTML above there is no need for the z-index property.
Now, the only thing left is to change the background color of boxes 2 and 3 to black.
Full code:
body {
margin: 0;
height: 100vh;
background-color: black;
display: flex;
}
.container {
position: relative;
width: 300px;
height: 150px;
margin: auto;
}
.box {
position: absolute;
width: 300px;
height: 150px;
border-radius: 15px;
}
.box1 {
border: 5px solid white;
width: 320px;
height: 170px;
top: -14px;
left: -15px;
}
.box2 {
background-color: black;
top: -30px;
left: 30px;
}
.box3 {
background-color: black;
top: 30px;
left: -30px;
}
.box4 {
background-color: red;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
}
<div class="container">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4">
<h3>Content</h3>
</div>
</div>
I've borrowed this (Accepted Answer) venn diagram script to do the obvious, However I'm struggling to get any text I put within the <div> to align center and valign middle. I've tried adding both into the CSS for div {} but this doesn't work. I tried display:table which did work, however this messed up the position of the rest of the circles. As you can see the number is at the top left of the outer1 div. I need it in the middle, and to be able to do the same for all 7 circles/overlaps
css:
.venn div {
width: 250px;
height: 250px;
border-radius: 50%;
pointer-events: none;
position: absolute;
text-align: center;
vertical-align: middle;
}
.venn.innerw {
left: 50px;
top: 0px;
overflow: hidden;
position: absolute;
/* border: solid; */
z-index: 20;
/* transform: translateZ(10px); */
pointer-events: none;
}
.venn.innerw2 {
margin-left: 0px;
top: 0px;
overflow: hidden;
position: static;
/* border: solid; */
/* z-index: 20; */
pointer-events: none;
}
.venn.innerw3 {
margin-left: 170px;
top: 0px;
overflow: hidden;
position: static;
/* border: solid; */
/* z-index: 20; */
pointer-events: none;
}
.venn.inner {
margin-left: -85px;
margin-top: 130px;
background-color: palegreen;
z-index: 20;
position: static;
pointer-events: auto;
}
.venn.inner:hover {
background-color: green;
}
.venn.mwrap {
position: absolute;
overflow: hidden;
pointer-events: none;
z-index: 10;
}
.venn.mwrap2 {
position: static;
margin-left: 0px;
margin-top: 0px;
overflow: hidden;
pointer-events: none;
}
.venn.mid {
position: static;
pointer-events: auto;
}
#midaw1 {
left: 50px;
top: 0px;
}
#mida {
left: 50px;
margin-left: 170px;
margin-top: 0px;
}
#midbw1 {
left: 220px;
top: 0px;
}
#midb {
margin-left: -85px;
margin-top: 130px;
}
#midcw1 {
left: 135px;
top: 130px;
}
#midc {
margin-left: -85px;
margin-top: -130px;
}
.venn.mid {
background-color: lightblue;
z-index: 15;
}
.venn.mid:hover {
background-color: blue;
}
#outer1 {
left: 50px;
top: 0px;
}
#outer2 {
left: 220px;
top: 0px;
}
#outer3 {
left: 135px;
top: 130px;
}
.venn.outer {
background-color: lightcoral;
z-index: 1;
pointer-events: auto;
}
.venn.outer:hover {
background-color: red;
}
Here's html
<div class="venn">
<div id="outer1" class="venn outer">
<?php echo $lp1; ?>
</div>
<div id="outer2" class="venn outer">
</div>
<div id="outer3" class="venn outer">
</div>
<div id="midaw1" class="venn mwrap">
<div id="midaw2" class="venn mwrap2">
<div id="mida" class="venn content mid"></div>
</div>
</div>
<div id="midbw1" class="venn mwrap">
<div id="midbw2" class="venn mwrap2">
<div id="midb" class="venn content mid"></div>
</div>
</div>
<div id="midcw1" class="venn mwrap">
<div id="midcw2" class="venn mwrap2">
<div id="midc" class="venn content mid"></div>
</div>
</div>
<div class="venn innerw">
<div class="venn innerw2">
<div class="venn innerw3">
<div class="venn inner">
</div>
</div>
</div>
</div>
</div>
OR if someone has a better alternative for a venn diagram with live php/mysql data then please fire it my way.
Many Thanks
Do it like this:
Markup
<div class="venn">
<div id="outer1" class="venn outer">
<p>Some text</p>
</div>
</div>
CSS
.venn.outer{
display: table;
text-align: center;
}
.venn.outer p{
display: table-cell;
vertical-align: middle;
}
I would like to implement timeline part on my website.
I have picture how it should look but I can't think any good way to do it.
How it should look:
Actual code:
js fiddle
<div class="right ">
what should I put here to get that circle?
</div>
Most confusing part is how to get that circle and that line together?
Could anyone suggest anything?
Thank you.
You could use :after, changing the styles to your liking.
.border needs to be positioned non-statically.
.wrapper {
width: 1030px;
background-color: #534741;
height: 500px;
}
.right {
color: #fff;
width: 90%;
text-align: right;
padding: 10px 10px 0 0;
display: block;
}
.border {
border-bottom: 2px solid #000;
width: 50%;
float: right;
margin: 10px 140px 0 10px;
position: relative;
}
.border:after {
/* Position and border */
display: block;
content: '';
border: 2px solid #000;
position: absolute;
width: 32px;
right: -34px; /*** -(Width+Border) ***/
height: 32px;
bottom: -18px; /*** -((Height/2)+Border) ***/
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.text {
float: right;
width: 300px;
margin-right: 90px;
}
<div class="wrapper">
<div class="right">
<h2>Text</h2>
</div>
<div class="right">
<h3>2014</h3>
</div>
<div class="right "></div>
<div class="right border"></div>
<div class="right text">
<p>Lorem ipsum doloremLorem ipsum doloremLorem ipsum doloremLorem ipsum doloremLorem ipsum dolorem</p>
</div>
</div>
JSFiddle
Try to make it with positioning and borer radius. Or simply use images.
.content-wrapper {
position: relative;
width: 400px;
margin-bottom: 30px;
}
.line .circle {
width: 50px;
height: 50px;
border-radius: 25px;
border: 1px solid black;
position: absolute;
top: -25px;
}
.line {
position: relative;
border-bottom: 1px solid black;
}
.odd .line {
margin-right: 50px;
}
.even .line {
margin-left: 50px;
}
.odd .circle {
right: -50px;
}
.even .circle {
left: -50px;
}
.content,
.header {
padding: 0 60px;
}
.odd .content,
.odd .header {
text-align: right;
}
.even .content,
.even .header {
text-align: left;
}
<div class="content-wrapper odd">
<div class="header">Some title</div>
<div class="line">
<div class="circle"></div>
</div>
<div class="content">Loerm ipsum dolerom</div>
</div>
<div class="content-wrapper even">
<div class="header">Some title</div>
<div class="line">
<div class="circle"></div>
</div>
<div class="content">Loerm ipsum dolerom</div>
</div>
Below code should work:
.box-with-circle {
width: 90%;
position: relative;
}
.box-with-circle .circle {
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 0;
margin -20px 0 0 -20px;
border: 1px solid #000;
background-color: #fff;
z-index: 1;
border-radius: 50%;
}
.box-with-circle hr {
position: relative;
top: 20px;
}
<div class="box-with-circle">
<div class="circle"></div>
<hr />
</div>