I am stuck on how to align this diagonal line inside the inner circle. I have tried using position: absolute and display: flex and other methods, but cannot seem to get something that works.
jsFiddle: https://jsfiddle.net/Kaevonz/7edw8yuq/20/
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: start;
height: 500px;
border: 1px solid gray;
}
.elem {
box-sizing: border-box;
}
.div1 {
border-top: 3px solid #0DA8AA;
border-left: 1px solid #0DA8AA;
border-right: 1px solid #0DA8AA;
height: 70px;
width: 70px;
background: white;
}
.div2 {
border: 1px solid blue;
border-radius: 50%;
width: 200px;
height: 200px;
background: white;
display: flex;
align-items: center;
justify-content: center;
}
.div3 {
border: 1px solid green;
border-radius: 50%;
width: 180px;
height: 180px;
background: white;
}
.div4 {
border-top: 1px dashed #f00;
width: 50%;
transform: rotate(-45deg);
transform-origin: top middle;
}
<div class="container">
<div class="elem div1"></div>
<div class="elem div2">
<div class="elem div3">
<div class="elem div4">
</div>
</div>
</div>
</div>
You can center the line using flexbox on div3
display: flex;
align-items: center;
justify-content: center;
Then adjust the transform of the line as required.
I'm assuming from the design this is supposed to be an clock of some kind and this a "second hand".
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
height: 500px;
border: 1px solid gray;
}
.elem {
box-sizing: border-box;
}
.div1 {
border-top: 3px solid #0DA8AA;
border-left: 1px solid #0DA8AA;
border-right: 1px solid #0DA8AA;
height: 70px;
width: 70px;
background: white;
}
.div2 {
border: 1px solid blue;
border-radius: 50%;
width: 200px;
height: 200px;
background: white;
display: flex;
align-items: center;
justify-content: center;
}
.div3 {
border: 1px solid green;
border-radius: 50%;
width: 180px;
height: 180px;
background: white;
display: flex;
align-items: center;
justify-content: center;
}
.div4 {
border-top: 1px dashed #f00;
width: 50%;
transform: translateX(-50%) rotate(90deg);
transform-origin: right;
animation: spin 5s linear infinite;
}
#keyframes spin {
0% {
transform: translateX(-50%) rotate(90deg);
}
100% {
transform: translateX(-50%) rotate(450deg);
}
}
<div class="container">
<div class="elem div1"></div>
<div class="elem div2">
<div class="elem div3">
<div class="elem div4">
</div>
</div>
</div>
</div>
Use position:absolute and make it relative to the outer container:
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: start;
height: 500px;
border: 1px solid gray;
}
.elem {
box-sizing: border-box;
}
.div1 {
border-top: 3px solid #0DA8AA;
border-left: 1px solid #0DA8AA;
border-right: 1px solid #0DA8AA;
height: 70px;
width: 70px;
background: white;
}
.div2 {
border: 1px solid blue;
border-radius: 50%;
width: 200px;
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.div3 {
border: 1px solid green;
border-radius: 50%;
width: 180px;
aspect-ratio: 1;
}
.div4 {
border-top: 1px dashed #f00;
position: absolute;
width: 100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
}
<div class="container">
<div class="elem div1"></div>
<div class="elem div2">
<div class="elem div3">
<div class="elem div4">
</div>
</div>
</div>
</div>
I would also simplify your code a little like below:
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: start;
height: 500px;
border: 1px solid gray;
}
.elem {
box-sizing: border-box;
}
.div1 {
border: solid #0DA8AA;
border-width: 3px 1px 0;
height: 70px;
aspect-ratio: 1;
}
.div2 {
border: 1px solid blue;
border-radius: 50%;
width: 200px;
aspect-ratio: 1;
display: grid;
position: relative;
}
.div2:before {
content:"";
border-top: 1px dashed #f00;
position: absolute;
width: 100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
}
.div2:after {
content: "";
border: 1px solid green;
border-radius: 50%;
margin: 10px;
}
<div class="container">
<div class="elem div1"></div>
<div class="elem div2"></div>
</div>
Related
How am I going to turn
into
I tried to use justify-content: space between; and seperated the blocks, but how am I going to align 3 and 4 to the bottom of the container
CSS Code
.container {
width: 240px;
height: 200px;
border: 1px solid gray;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.container > div {
width: 80px;
height: 50px;
border: 1px solid red;
}
Assuming all these sizes are hard coded, you could do something like this.
* {
box-sizing: border-box;
}
.container {
width: 240px;
height: 200px;
border: 1px solid gray;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
}
.container > div {
width: 80px;
height: 50px;
border: 1px solid red;
flex-shrink: 0;
}
.container > div:nth-child(1),
.container > div:nth-child(2),
.container > div:nth-child(5) {
order: -1;
}
.container > div:nth-child(5) {
margin-inline: 80px;
}
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
If only the size of your inside boxes are fixed you can use this solution.
.parent {
display: flex;
justify-content: space-between;
width: 100%;
height: 80vh;
border: 1px solid black;
position: relative;
resize: both;
}
div {
display: inline-block;
width: 100px;
height: 30px;
border: 1px solid red;
}
.three {
position: absolute;
bottom: 0%;
}
.four {
position: absolute;
bottom: 0%;
right: 0%;
}
.five {
position: absolute;
bottom: 50%;
right: 50%;
transform: translate(50%, 50%);
}
<div class="parent">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
</div>
In a css/html element on a webpage I've made, if a user zooms in or out on their browser, artifacts emerge showing a line. Here is a code pen of the issue. Zoom in or out on your browser to see the red line at top emerge like below:
I've read that these problems can emerge because a browser can set the zoom to 1.5x, thus creating rounding issues for pixels. See slack post here. But I'm not sure what the appropriate fix should be. In my case I want the triangles at each end of my rectangle element which I create via css styling. Besides recreating the graphic via svg, is there any good tricks?
Here is the html/css in codepen:
#root {
display: block;
width: 100%;
height: 100%;
background-color: lightgrey;
padding: 24px;
max-width: 400px;
float: center;
position: relative;
}
#gridRoot {
display: flex;
flex-flow: column wrap;
top: 50%;
left: 50%;
align-content: center;
}
#LegendContainer {
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
width: 100%;
align-items: center;
justify-content: space-between;
}
#container {
background-color: grey;
postion: relative;
height: 120px;
justify-content: center;
left: calc(50% - 60px);
text-align: center;
top: calc(50% - 60px);
}
#circle {
transform: rotate(7.39deg);
}
#jss {
display: flex;
position: absolute;
background: red;
top: 40px;
width: 110px;
opacity: 80%;
height: 20px;
}
#jss::before {
left: 0;
width: 0;
bottom: 0;
height: 0;
content: '';
position: absolute;
transform: rotate(180deg);
border-top: 10px solid white;
border-left: 10px solid #00007f;
border-bottom: 10px solid white;
}
#jss::after {
right: 0;
width: 0;
bottom: 0;
height: 0;
content: '';
position: absolute;
border-top: 10px solid white;
border-left: 10px solid #7f0000;
border-bottom: 10px solid white;
}
<div id="root">
<div id="gridRoot">
<div id="LegendContainer">
<div id="container">
<div id="circle">
</div>
<div id="jss">
</div>
</div>
</div>
</div>
</div>
The ::before and ::after elements seemed to be causing the issue. Solution;
body {
margin: 0;
}
#container {
background-color: grey;
position: relative;
display: flex;
height: 120px;
justify-content: center;
text-align: center;
}
#jss {
display: flex;
position: absolute;
top: 40px;
width: 110px;
opacity: 80%;
height: 20px;
}
#jss-internal {
background: red;
width: 100%;
}
#jss-before {
content: '';
transform: rotate(180deg);
border-top: 10px solid white;
border-left: 10px solid #00007f;
border-bottom: 10px solid white;
}
#jss-after {
border-top: 10px solid white;
border-left: 10px solid #7f0000;
border-bottom: 10px solid white;
}
<div id="root">
<div id="LegendContainer">
<div id="container">
<div id="circle">
</div>
<div id="jss">
<div id="jss-before">
</div>
<div id="jss-internal">
</div>
<div id="jss-after">
</div>
</div>
</div>
</div>
</div>
I have two div's next to each other but I cannot seem to get float: left to work properly and achieve what I want. Every time, the left div will still cut into/overlap onto the right div like so (This the dynamic version of my code with some jQuery code which changes the size of the divs based on user input): https://gyazo.com/b373205412f4ba18f32dad0f3cf877d2
Here is the static version of my code where I change the width/height manually. As you can see I have float: left on div5brother, but div5 still overlaps onto it. jsFiddle: https://jsfiddle.net/Kaevonz/92etqaxk/10/
This is what I am trying to recreate:
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: start;
height: 500px;
border: 1px solid gray;
}
.elem {
box-sizing: border-box;
}
.div1 {
border-top: 3px solid #0DA8AA;
border-left: 1px solid #0DA8AA;
border-right: 1px solid #0DA8AA;
height: 60px;
width: 205px;
background: white;
}
.div2 {
border: 1px solid #0DA8AA;
border-radius: 50%;
width: 290px;
height: 290px;
background: white;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.div3 {
border: 1px solid #0DA8AA;
border-radius: 50%;
width: 280px;
height: 280px;
background: white;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.div3 > span {
transform: translate(-10%, -55%) rotate(-45deg);
font-size: 11px;
}
.div4 {
border-top: 0.5px dashed black;
width: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
}
.div5container {
width: 205px;
height: 50px;
position: absolute;
top: 0;
}
.div5 {
border: 0.5px dashed black;
width: 235px;
height: 50px;
top: 0;
transform: translateX(-50%);
left: 50%;
position: absolute;
}
.div5brother {
position: absolute;
top: 0;
right: -80px;
width: 80px;
height: 50px;
border-top: 1px solid black;
border-bottom: 1px solid black;
float: left;
}
.div5brother > span {
font-size: 9px;
line-height: 50px;
display: block;
position: absolute;
right: -40px;
text-transform: uppercase;
}
<div class="container">
<div class="elem div1"></div>
<div class="elem div2">
<div class="elem div3"><span>Pipe O.D.</span>
<div class="div5container">
<div class="elem div5">
</div>
<div class="elem div5brother">
<span>Min. Cutter Travel</span>
</div>
</div>
<div class="elem div4">
</div>
</div>
</div>
</div>
As far as I can see the overlapping is due to you making the div5 element 30px wider than its container. I changed its width from width: 235px; to width: 205px; and the overlapping is gone and it seems to match the image. Here is a JSFiddle with my changes.
I am trying to recreate this graphic but I am a bit stuck on how to add the tangent rectangle on top of the outer concentric circle and below the 3 sided rectangle object as shown below. Additionally, the height of the rectangle should be tall enough so that it only touches the outside of the inner circle. This is what I have so far on jsFiddle.
jsFiddle: https://jsfiddle.net/Kaevonz/mowahL2v/35/
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: start;
height: 500px;
border: 1px solid gray;
}
.elem {
box-sizing: border-box;
}
.div1 {
border-top: 3px solid #0DA8AA;
border-left: 1px solid #0DA8AA;
border-right: 1px solid #0DA8AA;
height: 70px;
width: 120px;
background: white;
}
.div2 {
border: 1px solid #0DA8AA;
border-radius: 50%;
width: 200px;
height: 200px;
background: white;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.div3 {
border: 1px solid #0DA8AA;
border-radius: 50%;
width: 180px;
height: 180px;
background: white;
}
.div4 {
border-top: 0.5px dashed black;
width: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
}
.div5 {
border: 0.5px dashed black;
width: 120px;
height: 80px;
}
<div class="container">
<div class="elem div1"></div>
<div class="elem div2">
<div class="elem div3">
<div class="elem div5">
<div class="elem div4">
</div>
</div>
</div>
</div>
</div>
You are already using a relative position for div2, so i would use a position: absolute on div5:
.div5 {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
border: 0.5px dashed black;
width: 120px;
height: 80px;
}
The transform property, combined with the left property is to make sure that your element is centered.
Then, i would remove your div4 from div3, because it looks like you're creating relationships between divs that don't seem to be necessary (Unless there is a mathematical reason for that):
<div class="container">
<div class="elem div1"></div>
<div class="elem div2">
<div class="elem div3">
<div class="elem div5">
</div>
<div class="elem div4">
</div>
</div>
</div>
</div>
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: start;
height: 500px;
border: 1px solid gray;
}
.elem {
box-sizing: border-box;
}
.div1 {
border-top: 3px solid #0DA8AA;
border-left: 1px solid #0DA8AA;
border-right: 1px solid #0DA8AA;
height: 70px;
width: 120px;
background: white;
}
.div2 {
border: 1px solid #0DA8AA;
border-radius: 50%;
width: 200px;
height: 200px;
background: white;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.div3 {
border: 1px solid #0DA8AA;
border-radius: 50%;
width: 180px;
height: 180px;
background: white;
}
.div4 {
border-top: 0.5px dashed black;
width: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
}
.div5 {
border: 0.5px dashed black;
width: 120px;
height: 80px;
position: absolute;
top: 0;
transform: translateX(-50%);
left: 50%;
}
<div class="container">
<div class="elem div1"></div>
<div class="elem div2">
<div class="elem div3">
<div class="elem div5">
</div>
<div class="elem div4">
</div>
</div>
</div>
I am little stuck and need ur help, actually I am stuck in a problem I need to create an self pointing arrow to a rectangular box in css which I am unable to develop it Any help with example would be appreciated.
To understand the problem better I am attaching the desired output image.
I am also sharing my code what I have tried
body {
box-sizing: border-box;
margin: 10px;
}
.wrapper {
display: flex;
}
.container {
height: 200px;
width: 200px;
border: 1px solid black;
}
.container-2 {
margin-top: 4em;
height: 75px;
width: 75px;
border: 1px solid black;
}
<div class="wrapper">
<div class="container"></div>
<div class="container-2"></div>
</div>
You can give the second box a pseudo element and style it using clip-path to make a little arrow:
body {
box-sizing: border-box;
margin: 10px;
}
.wrapper {
display: flex;
}
.container {
height: 200px;
width: 200px;
border: 1px solid black;
}
.container-2 {
margin-top: 4em;
height: 75px;
width: 75px;
border: 1px solid black;
border-left-width: 0;
position: relative;
}
.container-2::after {
content: '';
display: block;
position: absolute;
background-color: black;
width: 10px;
height: 10px;
clip-path: polygon(100% 0, 80% 50%, 100% 100%, 0 50%);
bottom: 0;
left: 0;
transform: translateY(50%);
}
<div class="wrapper">
<div class="container"></div>
<div class="container-2"></div>
</div>
Perhaps this pseudo element ::after with a unicode arrow?
I additionally removed the left border
body {
box-sizing: border-box;
margin: 10px;
}
.wrapper {
display: flex;
}
.container {
height: 200px;
width: 200px;
border: 1px solid black;
}
.container-2 {
margin-top: 4em;
height: 75px;
width: 75px;
border: 1px solid black;
border-left:0;
}
.container-2::after {
content: "⮜";
position: absolute;
top: 140px;
}
<div class="wrapper">
<div class="container"></div>
<div class="container-2"></div>
</div>
Removed left border
Added pseudo element::before, could also be div with class arrow
Created triangle arrow
body {
box-sizing: border-box;
margin: 10px;
}
.wrapper {
display: flex;
}
.container {
height: 200px;
width: 200px;
border: 1px solid black;
}
.container-2 {
margin-top: 4em;
height: 75px;
width: 75px;
border: 1px solid black;
border-left: none;
position: relative;
}
.container-2:before {
content: '';
display: block;
width: 0;
height: 0;
border-top: 4px solid transparent;
border-right: 8px solid black;
border-bottom: 4px solid transparent;
position: absolute;
left: 0;
bottom: -4px;
}
<div class="wrapper">
<div class="container"></div>
<div class="container-2"></div>
</div>