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;
}
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 am looking for a way of creating a "Spiral" in CSS.
Here is an image to make it a bit more clear what I am trying to achieve:
So a partial circle with an outline that gets bigger.
Ideally I want to be able to set the length of the Spiral. (from (0) to 360°)
Also it would be nice to place a cricle at the end (just like in my sample)
Here is a codesnippet of what I came up so far.
* {margin: 0; padding: 0;}
div {
box-sizing: border-box;
width: 200px; height: 200px;
margin: 0 auto;
background: #fff;
border-top: 30px solid #fd0;
border-right: 40px solid #fa0;
border-bottom: 60px solid #f50;
border-left: 0 solid blue;
border-radius: 50%;
position: relative;
}
div::after { /* kreis */
content: "";
position: absolute; top: 80%; left: 8%;
width: 90px; height: 90px;
background: red;
border-radius: inherit;
}
div::before { /* hide the stuff that is too much. */
content: "";
position: absolute; top: 50%; left: 0;
width: 50px; height: 100%;
background-color: inherit;
}
<div></div>
I would also accept an svg way of doing this.
this what i came up with some tweaking Css and html i guess it similar to the image DEMO Not tested on IE not sure whether responsive it is
.spiral{
background-color:black;
width: 100px;
height:100px;
border-radius:50%;
}
.spiral:before{
content: '';
width: 27px;
height: 43px;
background-color: white;
position: absolute;
border-top-right-radius: 144px;
border-bottom-left-radius: 61px;
border-bottom-right-radius: 88px;
left: 53px;
top: 25px;
}
.spiral:after{
content: '';
width: 68px;
height: 52px;
background-color: white;
position: absolute;
left: 4px;
top: -11px;
transform: rotateZ(200deg);
}
<div class="spiral"></div>
I have a jsfiddle here - http://jsfiddle.net/w2tbefap/
It's a simple css problem.
I have a two separate elements (div's here).
The two elements have different widths.
I need to responsively center the elements next to each other so it is positioned like in the bottom example. The bottom example is just a centered image.
.block-1{
border: 1px solid red;
height: 100px;
}
.content{
border: 1px solid green;
position: relative;
}
.block-1-1{
background: blue;
width: 100px;
height: 50px;
//float: left;
position: absolute;
right: 50%;
margin-right: 20px;
}
.block-1-2{
background: yellow;
width: 300px;
height: 50px;
//float: right;
position: absolute;
left: 50%;
//right: 0;
}
.block-2{
border: 1px solid red;
height: 100px;
}
.content-2{
text-align: center;
}
Try this CSS for the blocks, and add text-align:center; to .content:
.block-1-1 {
background: blue;
width: 100px;
height: 50px;
margin-right: 20px;
display:inline-block;
}
.block-1-2 {
background: yellow;
width: 300px;
height: 50px;
display:inline-block;
}
jsFiddle example
Do you have to use position: absolute; ?
I suggest inline-block:
http://jsfiddle.net/w2tbefap/4/
.content{
border: 1px solid green;
position: relative;
text-align: center;
}
.block-1-1, .block-1-2 {
display: inline-block;
width: 100px;
height: 50px;
}
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;}
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;
}