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
Related
I have a Canvas and want to add a Div/Button in the bottom right-hand corner relative to Canvas. My current code looks as follows:
#container {
margin-top: 5px;
width: 96%;
margin: auto;
background-color: blue;
height: 300px;
}
#viewer {
width: 40%;
background-color: red;
height: 100%;
}
#button {
height: 40px;
width: 40px;
background-color: green;
position: absolute;
bottom: 0;
right: 0;
}
canvas {
border: 3px solid black;
width: 100%;
height: 100%;
}
<div id="container">
<div id="viewer">
<canvas></canvas>
<div id="button" onclick="myFunction();"></div>
</div>
</div>
But so far I couldn't manage to find a proper solution for this. It would be great if someone could help me with this.
Is this what you are looking for?
I recommand you checking out this article: CSS Layout - The position Property
#container{
margin-top: 5px;
width: 96%;
margin: auto;
background-color: blue;
height: 300px;
}
#viewer{
width: 40%;
background-color: red;
height: 100%;
position:relative;
}
#button{
height: 40px;
width: 40px;
background-color: green;
position: absolute;
bottom: 0;
right: 0;
}
canvas{
border: 3px solid black;
width: 100%;
height: 100%;
}
<div id="container">
<div id="viewer">
<canvas></canvas>
<div id="button" onclick="myFunction();"></div>
</div>
</div>
I think Temani was right — this puts the button at the bottom right of the canvas, is this not what you wanted?
#container{
margin-top: 5px;
width: 96%;
margin: auto;
background-color: blue;
height: 300px;
}
#viewer{
width: 40%;
background-color: red;
height: 100%;
position: relative;
}
#button{
height: 40px;
width: 40px;
background-color: green;
position: absolute;
bottom: 0;
right: 0;
}
canvas{
border: 3px solid black;
width: 100%;
height: 100%;
}
<div id="container">
<div id="viewer">
<canvas></canvas>
<div id="button" onclick="myFunction();"></div>
</div>
</div>
Like Temani Afif said.
position:relative
on #viewer worked for me.
I want to achieve something like this:
However im confuse how to create the triangle shaped but in dynamic size as the right side area is a paragraph that could have alot or small content.
I just can't get the structure worked out at the moment
So if you want a triangle shape there, then you can definitely use CSS to make a triangle for that section. Here's a quick demo that float's two div's and uses a CSS triangle.
Triangle CSS:
width: 0px;
height: 0px;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 10px solid #fff;
All together:
* {
box-sizing: border-box;
}
body {
background: #ccc;
margin: 0;
padding: 0;
}
p {
margin: 0;
text-align: center;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.wrap {
margin: 50px auto;
width: 500px;
}
.inner {
position: relative;
height: 100px;
width: 100%;
}
.left {
float: left;
background: #fff;
height: 100px;
position: relative;
width: 30%;
}
.right {
float: left;
background: #4c4c4c;
height: 100px;
padding: 0 40px;
width: 70%;
}
.border {
border: 1px solid yellow;
border-style: dashed;
position: absolute;
top: 0;
left: 0;
width: 96%;
height: 80px;
top: 50%;
transform: translateY(-50%);
right: 0;
margin: 0 auto;
}
.arrow-left {
width: 0px;
height: 0px;
position: absolute;
top: 0;
right: -10px;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 10px solid #fff;
}
<div class='wrap'>
<div class='inner'>
<div class='left'>
<p>Lorem Ipsum <br>Lorem ipsum dolor</p>
<div class='arrow-left'></div>
</div>
<div class='right'><p>Lorem Ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p></div>
<div class='border'></div>
</div>
</div>
JSFiddle: http://jsfiddle.net/8ogzcLhy/2/
Note: this layout uses floats which can ditched to use flex-box which has all kinds of great features to utilize to make cleaner layouts.
i try to make that in css
http://prntscr.com/l19jl9
but i only sucsses to
http://prntscr.com/l19juk
https://prnt.sc/l19itx
this my code:
.halfCircleLeft{
height:90px;
width:45px;
border-radius: 90px 0 0 90px;
background:green;
}
how i can do that?
You can set overflow: hidden to the container and make the inner div a big circle, it will give you the effect you want.
.cont{
position: relative;
overflow: hidden;
width: 200px;
height: 100px;
background-color: #e5e5e5;
}
.round-back{
top: -100px;
left: 50px;
position: absolute;
border-radius: 50%;
width: 300px;
height: 300px;
background-color: red;
}
<div class="cont">
<div class="round-back"></div>
</div>
This isn't exactly the shape that you have in your image, but it's simple and it's likely close enough:
#box {
border:1px solid #000;
border-radius: 10px 0px 0px 10px / 50% 0% 0% 50%;
width: 200px;
height: 100px;
background-color: #ccc;
}
<div id="box"></div>
The above solution uses elliptical border-radius, which is specified using a slash (/).
Another approach here is much closer to your original image, but it takes significantly more code to implement, and it's quite a bit more brittle too to customise:
#wrapper {
overflow: hidden;
width: 200px;
}
#box::before {
position: relative;
display: block;
content: "";
margin-left: -20px;
background: #ccc;
height: 400px;
width: 400px;
margin-top: -75%;
border-radius: 50%;
z-index: -10;
}
#box {
float: left;
position: relative;
margin-left: 20px;
width: 200px;
height: 100px;
background-color: #ccc;
}
#content {
position: absolute;
height: 100%;
width: 100%;
top: 0px;
}
<div id="wrapper">
<div id="box">
<div id="content">
</div>
</div>
</div>
This approach uses an oversized circle, which is then clipped by a #wrapper div using overflow: hidden;. The #content div isn't strictly necessary for the shape, but it may make it easier to position something inside the box.
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