Here , in the example below ..the parent is FIXED ...the pseudo element lies on top of parent...
HTML
<div class="b"> </div>
CSS
.b
{
height: 100px;
width: 400px;
border: 1px solid #a7a7a7;
top: 100px;
left: 100px;
background: #fff;
position: fixed;
}
.b::after
{
content:'';
position: absolute;
top: -15px;
left: 20px;
height: 30px;
width: 30px;
border:1px solid #a7a7a7;
transform:rotate(45deg);
z-index:-1;
background: red;
}
http://codepen.io/annamalai-saro/pen/wBqzzX
I want it below the parent...??
use this css instead of top:
.b::before
{
content:'';
position: absolute;
bottom: -15px;
left: 20px;
height: 30px;
width: 30px;
border:1px solid #a7a7a7;
transform:rotate(45deg);
z-index:-1;
background: red;}
Related
This question already has answers here:
Curve bottom side of the div to the inside with CSS
(2 answers)
Closed 4 years ago.
I have added 2 pictures here. You can see that first curve is down curve and second one is up curve.
Now, I have a rectangle box using CSS. I want to make the top and bottom border should be like the picture.
I can use CSS border-radius property to make a border curve. But I don't understand how can I make this type of border curve using CSS3?
Updated:
Here is the full output I desire:
I used before after to achieve this
div{
width: 400px;
height: 200px;
background-color: #333;
position: relative;
overflow: hidden;
}
div:before {
content: "";
position: absolute;
top: -10%;
width: 100%;
height: 50%;
background-color: white;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
}
div:after {
content: "";
position: absolute;
width: 100%;
bottom: -10%;
height: 50%;
background-color: white;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
<div></div>
Update
after OP's recent comment, here you can add content in content-main div
.content{
background-color: #333;
width: 400px;
}
.content-top, .content-bottom{
width: 400px;
height: 100px;
background-color: #333;
position: relative;
overflow: hidden;
}
.content-top:before {
content: "";
position: absolute;
top: -10%;
width: 100%;
height: 50%;
background-color: white;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
}
.content-bottom:after {
content: "";
position: absolute;
width: 100%;
bottom: -10%;
height: 50%;
background-color: white;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
.content-main{
padding: 10px;
}
<div class="content">
<div class="content-top"></div>
<div class="content-main">
<h1>Cat</h1>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS11TbGOYA0EmL-usNpArFE8o17OSRSilYYohX1lgyxaP43M2Pt">
</div>
<div class="content-bottom"></div>
</div>
You can achieve this using two Divs one with black background and the children with white background and rounded borders. The wrapper should have a padding to simulate border thickness:
#wrapper{
background:#000000;
width:600px;
height:200px;
padding:10px;
}
#roundCurve{
background:#ffffff;
width:600px;
height:200px;
border-bottom-left-radius:50% 50px;
border-bottom-right-radius:50% 50px;
border-top-left-radius:50% 50px;
border-top-right-radius:50% 50px;
}
<div id="wrapper">
<div id="roundCurve"></div>
</div>
Here is an example you can follow:
body {
background: black;
}
.roundCorner {
width: 150px;
height: 100px;
padding: 2em;
border-bottom: 0;
position: relative;
background: white;
border-radius: 1em 1em 0 0;
}
.roundCorner:before {
position: absolute;
left: -1px;
right: -1px;
top: 0;
height: 1.5em;
border: 1px solid black;
border-top: 0;
border-radius: 0 0 3em 3em;
content:'';
background: black;
}
.roundCorner:after {
position: absolute;
left: -1px;
right: -1px;
bottom: 0;
height: 1.5em;
border: 1px solid black;
border-bottom: 0;
border-radius: 3em 3em 0 0;
content: '';
background: black;
}
<div class="roundCorner"></div>
You can change background of body, .roundCorner, .roundCorner:before, .roundCorner:after to see how it's working.
I have this div here
<div class="example"></div>
and here is the CSS
.example
{
border: 5px solid #000;
height: 200px;
width: 400px;
position: relative;
}
What I am trying to do is add line after this box that is touching the right side of the box in the middle, how would I accomplish this?
You need to use ::after pseudo-element
.example {
border: 5px solid #000;
height: 200px;
width: 400px;
position: relative;
box-sizing: border-box;
}
.example::after {
content: " ";
display: block;
position: absolute;
height: 5px;
background: black;
width: 40px;
left: 100%;
top: calc(50% - 2px);
}
<div class="example"></div>
.example
{
border: 5px solid #000;
height: 200px;
width: 400px;
position: relative;
}
.example:after{
content:"";
position:absolute;
top:50%;
left:100%;
width:200px;
height:2px;
margin-top:-1px;
background:red;
}
<div class="example"></div>
.example:after {
content: '';
width: 100px;
height: 5px;
background: black;
display:inline-block;
position: absolute;
top: 50%;
left: 100%;
transform: translate(0,-100%);}
There are multiple ways to do that. You could, for example add following css:
.example:after {
content: '';
position: absolute;
top: 50px;
left: 100%;
border-top: 1px solid #000;
width: 100px;
}
How would i create a div shape like this? I have read a lot of techniques but i could not figure this one out. Inside the div is text that should not be distorted.
Every technique is welcome it does not have to be pure css.
My HTML structure:
<div class="intro">
<div class="intro-header">
<h1>Headline WOW</h1>
</div>
<div class="intro-text">
<p>Mieleni minun tekevi, aivoni ajattelevi lähteäni laulamahan, saa'ani sanelemasaa'ani sanelema sanelemasaa'ani sanelema </p>
</div>
</div>
you could use some skewed pseudo elements for this:
.first,
.last {
text-align: center;
line-height: 80px;
height: 80px;
background: green;
position: relative;
display: inline-block;
width: 400px;
margin-bottom: 20px;
}
.first:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
height: 50%;
width: 100%;
transform: SkewY(2deg);
transform-origin: bottom left;
background: inherit;
}
.last:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 50%;
width: 100%;
transform: SkewY(2deg);
transform-origin: bottom right;
background: inherit;
}
<div class="first">FIRST LINE</div>
<div class="last">LAST LINE</div>
An alternative (possibly) would be to use a gradient (although this may lead to jagged edges). Solution credit to Harry
body {
background: -webkit-linear-gradient(0deg, crimson, indianred, purple);
}
div {
height: 400px;
width: 400px;
background: -webkit-linear-gradient(75deg, lightseagreen 45%, transparent 45%, transparent 55%, lightseagreen 55%);
}
<div></div>
You can do this with border cut-offs.
As an example:
.top {
height: 300px;
background: red;
position: relative;
width: 300px
}
.top:before {
content: '';
position: absolute;
bottom: 0;
right: 0;
border-bottom: 10px solid white;
border-right: 300px solid red;
width: 0;
}
.bottom {
height: 300px;
background: red;
position: relative;
width: 300px;
padding-top: 10px;
margin-top: 0px;
}
.bottom:before {
content: '';
position: absolute;
top: 0;
right: 0;
border-top: 10px solid white;
border-left: 300px solid red;
width: 0;
}
<div class="top">Text</div>
<div class="bottom">Text</div>
This should do it.
html,body{
margin:0;
height:100%;
}
.intro{
width:400px;
display:inline-block;
background:red;
padding:50px;
}
.intro-header,.intro-text{
width:100%;
display:inline-block;
background:#ccc;
text-align:center;
position:relative;
}
.intro-header{
margin-bottom:50px;
}
.intro-header:after{
position:absolute;
left:0;
content:"";
width: 0;
height: 0;
border-left: 400px solid transparent;
border-top: 20px solid #ccc;
}
.intro-text:after{
position:absolute;
top:-20px;
left:0;
content:"";
width: 0;
height: 0;
border-right: 400px solid transparent;
border-bottom: 20px solid #ccc;
}
Example: CodePen
Not sure how to center this hexagon, setting margin: auto; doesn't effect the whole shape. Grateful if anyone could help, thanks in advance.
.hexagon {
position: absolute;
width: 300px;
height: 173.21px;
background-color: #fff;
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
margin-left: auto;
margin-right: auto;
border-left: 150px solid transparent;
border-right: 150px solid transparent;
}
.hexagon:before {
bottom: 100%;
border-bottom: 86.60px solid #fff;
position: absolute;
margin-left: auto;
margin-right: auto;
}
.hexagon:after {
position: absolute;
top: 100%;
width: 0;
border-top: 86.60px solid #fff;
}
margin:auto won't work if you have absolutely positioned divs so to center the hexagon, you have to add top:50%, left:50% and margin: -86.6px 0 0 -150px. The -86.6px is half the height of your hexagon and -150px is the half of the width. Also you have to make its parent position relative with a height of 100%.
HTML
<div class="hexagon"></div>
CSS
html,body{
background-color:#333;
height: 100%;
width: 100%;
position:relative;
}
.hexagon {
top: 50%;
left: 50%;
margin: -86.6px 0 0 -150px ;
}
Fiddle
If you just mean centering horizontally, you could do this: http://codepen.io/pageaffairs/pen/fxoHp
.hexagon {left: 0; right: 0; margin: auto;}
You can put it into another div which has margin:auto. see code here http://jsfiddle.net/oswxj9c5/
html:
<div class="parent">
<article>
<div class="hexagon">
</div>
</article>
</div>
css:
.parent {
position:relative;
background:blue;
width:900px;
height:500px;
margin:auto;
}
article {
margin:auto;
width:300px;
height:300px;
background:transparent;
}
.hexagon {
position: absolute;
width: 300px;
height: 173.21px;
background-color: red;
top:150px;
margin:auto;
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
margin-left: auto;
margin-right: auto;
border-left: 150px solid transparent;
border-right: 150px solid transparent;
}
.hexagon:before {
bottom: 100%;
border-bottom: 86.60px solid red;
position: absolute;
margin-left: auto;
margin-right: auto;
}
.hexagon:after {
position: absolute;
top: 100%;
width: 0;
border-top: 86.60px solid red;
}
Is it possible to achieve the attached result using CSS?.
http://imgur.com/a/Gea4a
Currently I am able to draw the circle and add single line. How can I add the label below the line? How to add the label on the right side of the circle?
My HTML:
<body>
<div id="circle"></div>
<div id="line"></div>
</body>
My CSS:
#circle {
height: 100px;
width: 100px;
border: 1px solid blue;
border-radius: 50px;
position: absolute;
top: 200;
left: 400px;
}
#line {
height: 45px;
border-left: 1px solid blue;
position: absolute;
top: 110px;
left: 450px;
}
HTML
<div id="circle1" class="circle"></div>
<div id="line1" class="line vertical" data-left="a" data-right="b" ></div>
<div id="line2" class="line horizontal" data-top="a" data-bot="b" ></div>
CSS
/*initialize your element position using id's*/
#circle1{
top: 200;
left: 400px;
}
#line1{
position: absolute;
top: 110px;
left: 450px;
}
#line2{
position: absolute;
top: 60px;
left: 355px;
}
/* Classes */
.circle {
height: 100px;
width: 100px;
border: 1px solid blue;
border-radius: 50px;
position: absolute;
}
.line.vertical {
height: 45px;
border-left: 1px solid blue;
}
.line.vertical:before{
position:absolute;
text-align:center;
content:attr(data-left);
top:50%;
left:10px;
}
.line.vertical:after{
position:absolute;
text-align:center;
content:attr(data-right);
top:50%;
right:10px;
}
.line.horizontal {
height: 45px;
width: 45px;
border-top: 1px solid blue;
position:absolute;
text-align:center;
}
.line.horizontal:before{
position:absolute;
text-align:center;
content:attr(data-top);
right:10px;
top:-50%;
}
.line.horizontal:after{
position:absolute;
text-align:center;
content:attr(data-bot);
top:10%;
left:0px;
}
USAGE
for initializing your element position use id's.
for styling lines or circle add line or circle class
for implementing a vertical line add vertical class
for implementing a vertical line add horizontal class
http://jsfiddle.net/Q2LET/
answer similar to #Kamlesh Kushwaha
You can use css pseduo elements for this purpose. However, you have to adjust the position and content separately for them.
CSS:
#line:before{
position:absolute;
text-align:center;
content:'A';
top:50%;
left:10px;
}
#line:after{
position:absolute;
text-align:center;
content:'B';
top:50%;
right:10px;
}
Demo: http://jsfiddle.net/GCu2D/135/
For dynamic label text, you can also use this approach:
HTML:
<div id="circle"></div>
<div id="line" data-left="ABC" data-right="DEF" ></div>
CSS:
#line:before{
position:absolute;
text-align:center;
content:attr(data-left);/*This will display the attribute values as content*/
top:50%;
left:10px;
}
#line:after{
position:absolute;
text-align:center;
content:attr(data-right);/*This will display the attribute values as content*/
top:50%;
right:10px;
}
Demo for dynamic content: http://jsfiddle.net/GCu2D/136/
Cause everything is position:absolute i added also a label with an absolute position.
You can creat at any place, just play a little with top and left
Hope this helps.
<div id="circle"></div>
<div id="line"></div>
<label id="leftlabel">test<label>
#circle
{
height: 100px;
width: 100px;
border: 1px solid blue;
border-radius: 50px;
position: absolute;
top: 200;
left: 400px;
}
#line
{
height: 45px;
border-left: 1px solid blue;
position: absolute;
top: 110px;
left: 450px;
}
#leftlabel
{
position: absolute;
top:50px;
left: 350px;
}
whatch this fiddle.
http://jsfiddle.net/sk8c3/
Like this?
http://jsfiddle.net/HvsVG/
<body>
<div id="circle"></div>
<div id="line"></div>
<div id="label1">Label456</div>
<div id="label2">Label123</div>
</body>
#circle
{
height: 100px;
width: 100px;
border: 1px solid blue;
border-radius: 50px;
position: absolute;
left: 400px;
}
#line
{
height: 45px;
border-left: 1px solid blue;
position: absolute;
top: 110px;
left: 450px;
}
#label1 {
position: absolute;
top: 150px;
left: 425px;
}
#label2 {
position: absolute;
top: 47px;
left: 510px;
}
Here a fiddle http://jsfiddle.net/keypaul/2KLx6/29/
css
.wrapper {
position:relative;
width:auto;
height:auto;
}
.circle
{
height: 100px;
width: 100px;
border: 1px solid blue;
border-radius: 50px;
position: absolute;
top: 200;
left: 200px;
}
.line-right {
width: 45px;
border-top: 1px solid blue;
position: absolute;
top: 50px;
left: 301px;
}
.line-left {
width: 45px;
border-top: 1px solid blue;
position: absolute;
top: 50px;
left: 155px;
}
.line-bottom
{
height: 45px;
border-left: 1px solid blue;
position: absolute;
top: 101px;
left: 250px;
}
.txt-top {
position:absolute;
margin:-30px 0 0 0 ;
}
.txt-bottom {
position:absolute;
margin:10px 0 0 0 ;
}
.txt-left {
position:absolute;
margin:0 0 0 -45px ;
}
.txt-right {
position:absolute;
margin:0 0 0 20px ;
}
html
<div class="wrapper">
<div class="circle"></div>
<div class="line-bottom">
<span class="txt-left">text</span>
<span class="txt-right">text</span>
</div>
<div class="line-right">
<span class="txt-top">text</span>
<span class="txt-bottom">text</span>
</div>
<div class="line-left">
<span class="txt-top">text</span>
<span class="txt-bottom">text</span>
</div>
</div>
Then you need to adjust margin, or set a fixed width for your span (and display:inline-block), so you can ceneter the text