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
Related
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>
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
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;
}
How to make a grid with dog bone format in CSS and/or jQuery? The
format of bone is this:
And the grid would look like this, just that out instead of hexagonal and the content (image/text) inside
format would bone:
It is possible to create this format?
Here's how you draw bone.
Demo
HTML
<div class="bone">
<div class="s1"></div>
<div class="s2"></div>
<div class="s3"></div>
<div class="s4"></div>
<div class="centerbone">
<div class="clean"></div>
</div>
</div>
CSS
.bone{
position: relative;
width: 600px;
}
.s1, .s2, .s3, .s4{
background:#fff;
height: 200px;
width: 200px;
border: 5px solid #000;
border-radius: 200px;
position:absolute;
}
.s1{
left: 0;
}
.s2{
right: 0;
}
.s3{
top: 205px;
}
.s4{
right: 0;
top:205px;
}
.centerbone{
background:#fff;
height: 250px;
width: 188px;
border: 5px solid #000;
position:absolute;
left: 205px;
top: 78px;
border-width: 5px 0 5px;
}
.clean{
background:#fff;
width: 400px;
height:100%;
position: absolute;
left:-104px;
}
And for hexagon grid, follow this tutorial:
http://jtauber.github.io/articles/css-hexagon.html