I have to horizontal lines created with CSS in <div> elements, now I want to join them with another line(the one drawn by hand), any ideas? The image of what I'm doing below:
.canvas {
top: 1px;
left: 1px;
background-color: #CCC;
width: 1000px;
height: 1000px;
}
.top-line {
top: 100px;
left: 256px;
position: absolute;
border-top: 1px solid #000;
height: 1px;
width: 488px;
}
.bottom-line {
top: 900px;
left: 100px;
position: absolute;
border-top: 1px solid #000;
height: 1px;
width: 800px;
}
<div class="canvas">
<div class="top-line"></div>
<div class="left-line"></div>
<div class="right-line"></div>
<div class="bottom-line"></div>
</div>
You can consider one element and some transformation to visually achieve what you want:
.box {
width:300px;
height:200px;
border:1px solid;
border-right:none; /*remove this if you want the right line too*/
transform:perspective(30px) rotateX(5deg);
transform-origin:bottom center;
}
body {
background:pink;
}
<div class="box">
</div>
Another idea considering skew transformation:
.box {
width:300px;
height:200px;
border-bottom:1px solid;
position:relative;
}
.box:before,
.box:after {
content:"";
position:absolute;
top:0;
height:100%;
width:50%;
border-top:1px solid;
}
.box:before {
border-left:1px solid;
transform-origin:bottom left;
left:0;
transform:skew(-10deg);
}
.box:after {
/*border-right:1px solid; add this for the right line */
transform-origin:bottom right;
right:0;
transform:skew(10deg);
}
body {
background:pink;
}
<div class="box">
</div>
I write some CSS for left-line in below code snippet, i hope it'll help you out. Thanks
.left-line {
border-left: 1px solid #000;
height: 815px;
position: relative;
left: 161px;
transform: rotate(11deg);
top: 181px;
}
.canvas {
top: 1px;
left: 1px;
background-color: #CCC;
width: 1000px;
height: 1000px;
}
.top-line {
top: 100px;
left: 256px;
position: absolute;
border-top: 1px solid #000;
height: 1px;
width: 488px;
}
.bottom-line {
top: 900px;
left: 100px;
position: absolute;
border-top: 1px solid #000;
height: 1px;
width: 800px;
}
.left-line {
border-left: 1px solid #000;
height: 815px;
position: relative;
left: 161px;
transform: rotate(11deg);
top: 181px;
}
<div class="canvas">
<div class="top-line"></div>
<div class="left-line"></div>
<div class="right-line"></div>
<div class="bottom-line"></div>
</div>
Related
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
I'm trying to align the border to the circle, to make it look like clipped there.
Here is an example:
http://jsfiddle.net/Beck/P63VY/1/
<div class="circle">
</div>
<div class="rounded"></div>
.circle {
width:150px;
height:150px;
border-radius:82px;
border:7px solid black;
}
.rounded {
position: absolute;
left: 22px;
top: 23px;
border: 1px solid red;
border-radius: 62px/66px 0px 0px 0px;
width: 200px;
height: 50px;
}
Is there a way to actually clip that top left corner?
Thanks.
try this
.circle {
width:150px;
height:150px;
border-radius:82px;
border:7px solid black;
}
.rounded {
position: absolute;
left: 18px;
top: 15px;
border: 1px solid red;
border-radius:72.5px;
width: 145px;
height: 145px;
}
</style>
<div class="circle">
<div class="rounded"></div>
</div>
Fiddle
The way I did it is:
Place <div class="rounded"></div> inside the <div class="circle">
If you want to keep the position: absolute in .rounded, add position: relative to the parent .circle
Add overflow: hidden to the parent, so the child gets clipped.
Remove all border-radius from the child .rounded since it's no longer needed.
HTML
<div class="circle">
<div class="rounded"></div>
</div>
CSS
.circle {
width:150px;
height:150px;
border-radius:82px;
border:7px solid black;
/* These were added: */
overflow:hidden;
position:relative;
}
.rounded {
position: absolute;
top: 10px;
border: 1px solid red;
width: 200px;
height: 50px;
}
Make the radius the same for both classes and make the height of .rounded to half the height of .circle. I also have changed the left and top values to align it.
HTML
<div class="circle"></div>
<div class="rounded"></div>
CSS
.circle {
width:150px;
height:150px;
border-radius:82px;
border:7px solid black;
}
.rounded {
position: absolute;
left: 12px;
top: 12px;
border: 1px solid red;
border-radius: 82px 0px 0px 0px;
width: 200px;
height: 75px;
}
Here's the fiddle: http://jsfiddle.net/Xs2Mr/.
Hope this helps!
I think Kai did it correctly, but in case you don't want it to touch the top of the circle, here is the best I could do with your fixed height of the red box.
http://jsfiddle.net/P63VY/18/
.circle {
width:150px;
height:150px;
border-radius:82px;
border:7px solid black;
}
.rounded {
position: absolute;
left: 20px;
top: 23px;
border: 1px solid red;
border-radius: 150px / 160px 0px 0px 0px;
width: 200px;
height: 50px;
}
try if any issue comment it
<style>
.circle {
border: 7px solid black;
border-radius: 82px 82px 82px 82px;
height: 150px;
margin-left: 1px;
width: 150px;
}
.rounded {
border: 1px solid red;
border-radius: 60px 0 0 0;
font-size: 30px;
height: 50px;
left: 20px;
line-height: 46px;
padding-left: 20px;
position: absolute;
top: 22px;
font-size:30px;
}
</style>
<div class="circle">
</div>
<div class="rounded">blah blah blah blah blah blah</div>
Got it working, but with a trick.
Here is the answer:
http://jsfiddle.net/Beck/P63VY/64/
Thanks for trying though ppl.
64 updates lol :D
<div id="rounded1" class="rounded"></div>
<div class="circle">
<div class="rounded"></div>
</div>
<div id="text">blah blah blah blah blah blah</div>
.circle {
width:150px;
height:150px;
border-radius:82px;
border:7px solid black;
overflow:hidden;
}
.rounded {
position: relative;
top: 23px;
left:-3px;
background:red;
width: 400px;
height: 50px;
}
#rounded1 {
position:absolute;
top:38px;
left:40px;
background:red;
}
#text {
position:absolute;
top:38px;
line-height:50px;
padding-left:20px;
font-size:30px;
color:white;
}