I was ask to create half circle-like design for my project in html css , its look like this :
Figma Design but it really ""zoomed"in.
i tried to make it and the closest i could look like this :
My Closest
with this code :
.semi-circle {
transform: translate(0, 0);
height: 150px;
width: 100%;
border-radius: 0 0 150px 150px;
/* border-radius: 0 0 150px 150px; */
background-color: #0E47A1;
}
<div class="semi-circle"></div>
what can i tweak and how to make it like the designed one
Heres some idea for you. you can set it to transform then rotate it at the same time put a fake div at the top so you can cover all remaining blue. Let me know.
body {background-color:lightgrey;}
.semi-circle {
height: 200px;
width: 200px;
border-radius : 50%;
background-color: #0E47A1;
margin-top:0px;
transform: scale(1.5) rotateX(105deg);
overflow:hidden;
align-items:center;
margin-left:50px;
}
.box {
width: 300px;
height: 800px;
border:1px solid gray;
background-color:white;
}
.blue {
background-color:#0E47A1;
height:100px;
}
.whitebox {
width:220px;
height:40px;
line-height:1;
margin:0 auto;
box-shadow: 2px 2px 4px 2px gray;
text-align:center;
padding:10px;
border-radius:20px;
position:absolute;
top:120px;
left:40px;
background-color:white;
}
<body>
<div>Home</div>
<div class="box">
<div class="blue">
<div class="semi-circle"></div>
<div class="whitebox">Hello Visitors!
<span>this is the hidden text......</span>
</div>
</div>
</div>
</body>
I have used ::after to create the effect, you can change the height get desired curve.
.curve{
position: relative;
width: 300px;
height: 200px;
margin: auto;
overflow: hidden;
}
.curve::after{
content: "";
position: absolute;
top: 0px;
left: 50%;
border-radius:50%;
background: blue;
width:500px;
height:300px;
transform: translate(-50%, -50%);
}
<div class="curve"></div>
This looks like the example. It is responsive and will fit like that on any screen.
.semi-circle {
transform: translate(0, 0);
height: 150%;
width: 150%;
border-radius: 50%;
/* border-radius: 0 0 150px 150px; */
background-color: #0E47A1;
position: absolute;
top: -90%;
left: -22.5%;
}
body {
overflow: hidden;
}
<div class="semi-circle"></div>
Related
I need to build the following screenshot, and I can't figure out how to do the angles responsively:
https://imgur.com/a/e9IJV
I tried using pseudo classes to add diagonal edges to a solid-color div.
But this design requires two images side-by-side so that won't work there. Also, the slants have to stay on the same angle through different sections with variable heights. I can't use clip-path because I need to support IE.
Here is my feeble attempt:
https://codepen.io/lsterling03/pen/zPEgaq
As you can see, I am having trouble! Is this design possible? Do you have any advice on how to approach this? Will it require javascript?
UPDATE
I have made a little progress. Here is an updated pen:
https://codepen.io/lsterling03/pen/GOOqmo
I can't get the slant right on the last section, which needs a variable height and width. I tried using javascript, but I don't have the right calculations:
$(".slant").css('width', $('.main').width() * 0.5 - 100);
$(".slant").css('border-top-width', $('.main').height());
I also haven't figured out how to do two images in a row yet.
Does anyone have suggestions to fix either of the above issues?
Here is something you can work with:
Bootply: https://www.bootply.com/4QuGRXY11d
.container{position:relative;width: 500px; overflow:hidden;}
.flex{display:flex;overflow:hidden;}
.cinq{overflow:hidden;width:50%;height:150px;background:blue;}
.cinq + .cinq{oveflow:hidden;right:-25%;width:75%;height:150px;position:absolute; transform: skewX(-20deg) translateX(-50px);background:red;}
.flex + .flex .cinq + .cinq{transform: skewX(20deg) translate(-50px)}
.cinq .img{height:100%;background-size:cover; background-image:url(https://s-media-cache-ak0.pinimg.com/564x/ca/9b/ca/ca9bca4db9afb09158b76641ea09ddb6.jpg); position: absolute;
width: 100%;
top: 0;
left: -50px;transform: skewX(20deg);}
.flex + .flex .cinq + .cinq .img{transform: skewX(-20deg);}
<div class="container">
<div class="flex">
<div class="cinq">1</div>
<div class="cinq">
<div class="img"></div>
</div>
</div>
<div class="flex">
<div class="cinq">3</div>
<div class="cinq"><div class="img"></div></div>
</div>
</div>
And, here is another example that you can start to investigate some more: CodePen
body {
background-color: #00bcd4;
}
div { box-sizing:border-box; }
.row {
overflow: hidden;
position: relative;
width: 100%;
}
.image {
background: url(https://s-media-cache-ak0.pinimg.com/564x/ca/9b/ca/ca9bca4db9afb09158b76641ea09ddb6.jpg) center center no-repeat #eee;
background-size: cover;
height: 400px;
width: 50%;
float: right;
}
.image2{
background: url(https://s-media-cache-ak0.pinimg.com/564x/ca/9b/ca/ca9bca4db9afb09158b76641ea09ddb6.jpg) center center no-repeat #eee;
background-size: cover;
height: 400px;
width: 64.5%;
float: left;
-webkit-clip-path: polygon(0 0, 100% 0, 78% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 78% 100%, 0% 100%);
}
.image3{
background: url(https://s-media-cache-ak0.pinimg.com/564x/ca/9b/ca/ca9bca4db9afb09158b76641ea09ddb6.jpg) top left no-repeat #eee;
background-size: cover;
height: 400px;
width: 50%;
float: left;
-webkit-clip-path: polygon(28% 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(28% 0, 100% 0, 100% 100%, 0% 100%);
position: absolute;
right: 0;
}
.text {
background-color: #eee;
padding: 30px;
position: relative;
width: 50%;
float: left;
height: 400px;
}
.text > div {
position: relative;
z-index: 1;
}
.text2 {
height: 400px;
width: 50%;
float: left;
background: #fff;
padding: 30px
}
.corner:after {
transition: all .3s ease;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
position: absolute;
display: block;
content: "";
top: 0;
}
.corner-right:after {
border-left: 150px solid #eee;
border-top: 400px solid transparent;
border-right: 270px solid transparent;
}
.corner-left:after {
border-right: 150px solid #eee;
border-top: 400px solid transparent;
border-left: 270px solid transparent;
right: 50%;
}
The image is moving depending on the size of the screen, I would like to fix it on the top middle. How do I do it? Here is 2 screenshots explaining:
HTML:
<div class="logo"></div>
CSS:
.logo {
background:url(../img/logo.png) no-repeat;
position:absolute;
display: inline-block;
left:50%;
top:30%;
height:120px;
width:175px;
margin:-115px 0px 0px -112px;
}
You could use translate:
.logo {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
height:120px;
width:175px;
background:url(../img/logo.png) no-repeat;
}
jsFiddle
You can use calc function in CSS.
Resize your window to see it's effect (in fullscreen).
.logo{
position: absolute;
width: 175px;
height: 120px;
top: 30%;
left: calc(50% - (175px / 2)); /* 50% parent width - half_of_image_width */
border: 1px solid red;
}
.container{
position: absolute;
width: 90%;
height: 90%;
border: 1px solid black;
}
<div class="container">
<div class="logo"></div>
</div>
This question already has answers here:
Fixed position but relative to container
(31 answers)
Closed 6 years ago.
I'm trying to make inner div fixed relative to it's parrent div. I made an example of my code on jsfiddle. Problem is when you scroll div. It is no longer on it's position. My html looks like:
<div class="outer">
<div class="inner1">
Lorem ipsum dolor
</div>
<div class="inner2">
</div>
</div>
and css
.outer{
position: relative;
width: 400px;
height: 300px;
border: 1px solid black;
overflow: auto;
}
.inner1{
position: absolute;
width:50px;
height: auto;
border: 1px solid blue;
top: 10px;
right: 10px;
}
.inner2{
width: 500px;
height: 500px;
}
Is there any way to make inner1 fixed relative to outer only using css ?
try this...
<style>
.outer{
position: relative;
width: 400px;
height: 300px;
border: 1px solid black;
overflow: auto;
}
.inner1{
position: fixed;
width:50px;
height: auto;
border: 1px solid blue;
}
.inner2{
width: 500px;
height: 500px;
}
</style>
You can try this:
.inner1 {
position: fixed;
width: 50px;
height: auto;
border: 1px solid blue;
top: 10px;
right: calc(100% - 400px); // 400px is the outer div's width
}
Here is working JSfiddle
<div class="container">
<div class="header">title</div>
<div class="cont_elements">
<div class="element">......</div>
<div class="element">......</div>
<div class="element">......</div>
</div>
and css will be
.header {
position: absolute;
top:0;
/* scrolling out of view :-( */
z-index:2;
background-color:pink;
}
.container {
position:relative;
width:200px;
height:400px;
background:gold;
}
.cont_elements {overflow-y:scroll; height:100%;}
.element {
position: relative;
}
Just change .inner1
.inner1{
position: fixed;
width:50px;
height: auto;
border: 1px solid blue;
margin-top: 10px;
left: 330px;
}
Suppose I have a div:
div {
height: 100px;
width: 500px;
background: blue;
margin: 0 auto;
}
And I want it to become two mode - skew to each side -
Here is the base form - http://jsfiddle.net/urielz/neybabgj/
How could I get the above two forms?
Update :
If it required using JavaScript - do it.
JSiddle Demo
CSS
div {
height : 100px;
width : 500px;
background : blue;
margin : 10px auto;
position: relative;
}
div:first-child:before {
position: absolute;
top:0;
right:100%;
width:0;
height:0;
content:'';
border:50px solid blue;
border-top-color:transparent;
border-left-color:transparent;
}
div:nth-child(2):after {
position: absolute;
top:0;
left:100%;
width:0;
height:0;
content:'';
border:50px solid blue;
border-bottom-color:transparent;
border-right-color:transparent;
}
HTML
<div class="crop">
<div class="skew"></div>
</div>
CSS
.crop {
width: 492px;
height: 240px;
overflow: hidden;
}
.skew {
display: block;
height : 100px;
width : 500px;
background : blue;
margin : 0 auto 0 32px;
position:relative;
-webkit-transform: skew(-30deg);
-moz-transform: skew(-30deg);
-ms-transform: skew(-30deg);
transform: skew(-30deg);
}
.skew:after {
height : 100px;
width : 500px;
background : blue;
margin : 0 auto;
position:absolute;
bottom: -120px;
content:'';
}
Fiddle: http://jsfiddle.net/neybabgj/7/
I'm using a div, and inside that div another div which needs to stick to the parent div.
But when i rescale the browser there's it's not sticking to the right place. Do i need to do this with javascript?
HTML
<div class="block">
White div block
<div class="block-content">
Green div
</div>
</div>
CSS
.block {
position: relative;
width: 100%;
height: 100%;
background-image: url('voorgrond.png');
background-repeat: no-repeat;
background-position: 70% center; /* positie van de screen */
}
.block-content {
position: absolute;
left: 65%;
top: 42%;
width: 200px;
height: 200px;
}
The green dot should stick inside the white square.
LIVE DEMO
<div class="block">
<div class="block-content"></div>
</div>
.block {
position: absolute;
background:#fff;
border-radius:10%;
width: 200px;
height: 200px;
padding:50px;
left: 65%;
top: 50%;
margin-top: -150px;
margin-left: -150px;
}
.block-content {
position: absolute;
background: #00A652;
border-radius:50%;
width: 200px;
height: 200px;
}
#media (max-width: 600px) {
.block{
left: 50%;
}
}
Assuming your goal is the image I made this fiddle which mimics what you seem to need.
FIDDLE
HTML:
<div class="block">
<div class="block-content">
Hierzo!
</div>
</div>
CSS:
.block{
position:relative;
margin: 300px 0 0 50%;
width:30%;
height:80px;
background:grey;
border-radius:10px;
}
.block-content{
width:50px;
height:50px;
background:green;
border-radius:50px;
position:absolute;
top:50%;
left:50%;
margin: -25px 0 0 -25px;
}
Hope this helps!
EDIT Added responsive width to .block