I want to make this exapmle in css3 and html5 in div.
thanx for all!
Actually I should not be answering this. SO is for helping you when you are stuck with your code, not for having others write the code for you. But hey, it is Easter, and since it is so easy...
div {
background: black;
width: 250px;
height: 250px;
border-radius: 50%;
margin-left: 150px;
position: relative;
}
div:before {
content: '';
position: absolute;
left: -150px;
top: 50px;
bottom: 50px;
right: -75px;
background: red;
border-top-left-radius: 40px 75px;
border-bottom-left-radius: 40px 75px;
z-index: -1;
}
and a demo: http://jsfiddle.net/o004hrqz/
Let me know if you want me to explain anything.
<html>
<head>
<style type="text/css">
.div1 {
width: 250px;
height: 60px;
margin-top: 50px;
background-color: #F00;
position: relative;
border-top-left-radius: 40px 75px;
border-bottom-left-radius: 40px 75px;
}
.div2 {
width: 100px;
height: 100px;
background-color: #000;
border-radius: 50%;
position: absolute;
left: 40px;
top: -20px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
</div>
</div>
</body>
</html>
Related
I'm working through the cssbattle.dev challenges to improve with CSS, and I'm stuck really close to the result on the 9 one. Can someone help me out?
The Target
My Code:
body {
background:#222730;
margin:0px;
width: 400px;
height: 300px;
}
.banner{
background: #4CAAB3;
width: 100%;
height: 150px;
margin-top: 75px;
}
.center-box{
position:relative;
top: -50px;
margin-left: 75px;
width: 150px;
height: 150px;
border: solid 50px #222730;
transform: rotate(45deg);
}
.dot{
position: absolute;
background: #393E46;
width: 50px;
height: 50px;
border-radius: 100%;
top: 125px;
left: 175px;
}
<body>
<div class="banner">
<div class="center-box"></div>
</div>
<div class="dot"></div>
</body>
try
.center-box{
position:relative;
top: -50px;
margin-left: 75px;
width: 150px;
height: 150px;
border: solid 50px #222730;
transform: rotate(45deg);
background: inherit ;
}
This question already has answers here:
How to center a "position: absolute" element
(31 answers)
How can I horizontally center an element?
(133 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
I am trying to find the best way to center one div over another which is using the 'top' and 'left' CSS components.
When resizing the browser window the circle should always be in the center of the box, however moves slightly off horizontally when scaling
Here is the code I am using;
https://codepen.io/EarlGrey8/pen/LYVOQrY
body {
background-color: #908787;
}
.banner {
position: fixed;
width: 101%;
margin: -1%;
height: 35%;
background-color: #76568e;
}
.moduleContainer {
position: absolute;
font-family: 'Bellota', cursive;
background-color: #e2e2e2;
top: 25%;
left: 20%;
border-style: solid;
border-radius: 20px;
border-color: #cacaca;
width: 60%;
height: 400px;
}
.moduleInner {
display: inline-block;
position: relative;
top: -130px;
width: 100%;
height: 70%;
}
.moduleImage {
position: relative;
border-radius: 100%;
background-color: #908787;
height: 250px;
width: 250px;
top: -130px;
left: 33%;
}
<body>
<div class="banner"></div>
<div class="moduleContainer">
<div class="moduleImage"></div>
<div class="moduleInner"></div>
</div>
</body>
To center the circle on any screen. Try the following CSS.
.moduleImage {
left: 50%;
transform: translateX(-50%);
}
Change .moduleImage's position, transform property.
body {
background-color: #908787;
}
.banner {
position: fixed;
width: 101%;
margin: -1%;
height: 35%;
background-color: #76568e;
}
.moduleContainer {
position: absolute;
font-family: 'Bellota', cursive;
background-color: #e2e2e2;
top: 25%;
left: 20%;
border-style: solid;
border-radius: 20px;
border-color: #cacaca;
width: 60%;
height: 400px;
}
.moduleInner {
display: inline-block;
position: relative;
top: -130px;
width: 100%;
height: 70%;
}
.moduleImage {
position: absolute; /* change */
border-radius: 100%;
background-color: #908787;
height: 250px;
width: 250px;
top: -130px;
left: 50%;
transform: translateX(-50%); /* change */
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://fonts.googleapis.com/css?family=Bellota&display=swap" rel="stylesheet">
<link rel="stylesheet" href="simple.css">
</head>
<body>
<div class="banner"></div>
<div class="moduleContainer">
<div class="moduleImage"></div>
<div class="moduleInner"></div>
</div>
</body>
</html>
you can use calc css3 calc
see example:
body {
background-color: #908787;
}
.banner {
position: fixed;
width: 101%;
margin: -1%;
height: 35%;
background-color: #76568e;
}
.moduleContainer {
position: absolute;
font-family: 'Bellota', cursive;
background-color: #e2e2e2;
top: 25%;
left: 20%;
border-style: solid;
border-radius: 20px;
border-color: #cacaca;
width: 60%;
height: 400px;
}
.moduleInner {
display: inline-block;
position: relative;
top: -130px;
width: 100%;
height: 70%;
}
.moduleImage {
position: relative;
border-radius: 100%;
background-color: #908787;
height: 250px;
width: 250px;
top: -130px;
left: calc(50% - 125px); /* just this line changed */
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://fonts.googleapis.com/css?family=Bellota&display=swap" rel="stylesheet">
<link rel="stylesheet" href="simple.css">
</head>
<body>
<div class="banner"></div>
<div class="moduleContainer">
<div class="moduleImage"></div>
<div class="moduleInner"></div>
</div>
</body>
</html>
everything is same.
just in .moduleImage class i changed left property to left: calc(50% - 125px);
125px is half of element width.
update your code by
.moduleContainer {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
font-family: 'Bellota', cursive;
background-color: #e2e2e2;
top: 50%;
left: 20%;
border-style: solid;
border-radius: 20px;
border-color: #cacaca;
width: 60%;
height: 400px;
}
.moduleInner {
display: inline-block;
height: 70%;
}
.moduleImage {
border-radius: 100%;
background-color: #908787;
height: 250px;
width: 250px;
}
I hope this work
How to create the curve that you see in picture with CSS and HTML?
Can I use CSS border radius or use other solution?
You could do it with two divs and psuedo elements :before and :after. Working code below
.top-bar{
height: 100px;
width: 100%;
background-color: #55c3ff;
}
.curved-bottom{
width: 80%;
margin: 0 auto;
height: 50px;
background-color: #55c3ff;
border-radius: 0 0 20px 20px;
position: relative;
}
.curved-bottom:before {
height: 50px;
width: 16%;
background-color: white;
border-top-right-radius: 10px;
left: -16%;
content: '';
position: absolute;
top: -8px;
}
.curved-bottom:after {
height: 50px;
width: 16%;
background-color: white;
border-top-left-radius: 10px;
right: -16%;
content: '';
position: absolute;
top: -8px;
}
<div class="top-bar"></div>
<div class="curved-bottom"></div>
If your main horizontal blue bar is a div, and the box sticking down is a separate div, you can use the pseudo elements :before and :after to create those inner radius.
See the following as an example:
html,
body {
padding: 0;
margin: 0;
}
.header {
position: relative;
background-color: #5DC4FD;
width: 100%;
height: 160px;
}
.tab {
position: relative;
top: 130px;
background-color: #5DC4FD;
width: 80%;
height: 100px;
margin: 0 auto;
border-radius: 0 0 30px 30px;
}
.tab:before {
position: absolute;
content: "";
left: -50%;
width: 50%;
height: 100px;
background-color: white;
border-radius: 0 30px 0 0;
}
.tab:after {
position: absolute;
content: "";
right: -50%;
width: 50%;
height: 100px;
background-color: white;
border-radius: 30px 0 0 0;
}
<div class="header">
<div class="tab">
</div>
</div>
Well, you could use overlapping divs like this:
#top {
background: #00BFFF;
width: 100%;
height: 150px;
}
#container{
display: flex;
}
#mid{
background: #00BFFF;
width: 70%;
height: 50px;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
}
#left{
background: #FFFFFF;
margin-top: -50px;
width: 15%;
height: 50px;
border-top-right-radius: 25px;
}
#right{
background: #FFFFFF;
margin-top: -50px;
width: 15%;
height: 50px;
border-top-left-radius: 25px;
}
<div id="top"></div>
<div id="container">
<div id="left"></div>
<div id="mid"></div>
<div id="right"></div>
</div>
but I'd recommend using a background image with the desired shape
I am trying to make nested divs, so I can position children with top and left, so they can overlap each other:
https://jsfiddle.net/e0cpuarv/
.boo {
position: absolute;
left: 10px;
top: 10px;
width: 100px;
height: 70px;
background-color: red;
}
.kah1 {
position: absolute;
left: 20px;
top: 30px;
width: 50px;
height: 50px;
background-color: green;
}
.kah2 {
position: absolute;
left: 30px;
top: 40px;
width: 50px;
height: 50px;
background-color: blue;
}
<body>
<div class="boo">
<div class="kah1"></div>
<div class="kah2"></div>
</div>
</body>
It works with one huge drawback - children just are on the top of parent. What should I do to make them be inside parent, like this?
desiredresult
In fact, children may be not DIVs, IMGs will be enough too, if this helps
try this one:
body{margin:0px;padding:0px;}
.boo {
position: absolute;
left: 10px;
top: 10px;
width: 100px;
height: 70px;
background-color: red;
}
.kah1 {
position: absolute;
left: 20px;
top: 30px;
width: 50px;
height: 40px;
background-color: green;
}
.kah2 {
position: absolute;
left: 30px;
top: 40px;
width: 50px;
height: 30px;
background-color: blue;
}
DEMO HERE
Change this:
.boo {
position: absolute;
left: 10px;
top: 10px;
width: 100px;
height: 70px;
background-color: red;
}
to this:
.boo {
position: absolute;
left: 10px;
top: 10px;
width: 100px;
height: 70px;
background-color: red;
overflow: hidden;
}
Here is the JSFiddle demo
Basically you add overflow:hidden to the parent element .boo :)
just make the main div (.boo) position: relative
see the code, and change the left and top values for kah1 and kah2 to position the inner boxes
.boo {
position: relative;
margin-left: 10px;
margin-top: 10px;
width: 100px;
height: 70px;
background-color: red;
}
.kah1 {
position: absolute;
left: 25px;
top: 12px;
width: 50px;
height: 50px;
background-color: green;
}
.kah2 {
position: absolute;
right: 25px;
top: 12px;
width: 50px;
height: 50px;
background-color: blue;
}
<body>
<div class="boo">
<div class="kah1"></div>
<div class="kah2"></div>
</div>
</body>
You can hide the overwflow with overflow: hidden, so in your case the css would be like this:
.boo {
position: absolute;
left: 10px;
top: 10px;
width: 100px;
height: 70px;
background-color: red;
overflow: hidden;
}
.kah1 {
position: absolute;
left: 20px;
top: 30px;
width: 50px;
height: 50px;
background-color: green;
}
.kah2 {
position: absolute;
left: 30px;
top: 40px;
width: 50px;
height: 50px;
background-color: blue;
}
<body>
<div class="boo">
<div class="kah1"></div>
<div class="kah2"></div>
</div>
</body>
I am new to coding, and am trying to make the intersecting part of these div's a different color. My initial attempt was to create a third div with a border specification to mimic the shapes, but I cannot make it match perfectly. Below is the markup and styling, describing what I want to be a red square and blue circle overlapping, with the overlap section being purple.
.box {
width: 200px;
height: 200px;
background: red;
position: relative;
top: 40px;
left: -35px;
}
.shape {
width: 250px;
height: 250px;
background: navy;
border-radius: 50%;
position: absolute;
left: 50px;
top: 50px;
}
#top-left {
width: 148px;
height: 147px;
background: purple;
position: absolute;
top: 1px;
left:2px;
border-top-left-radius: 118px;
}
<div class="box">
<div class="shape">
<div id="top-left"></div>
</div>
</div>
Is there an easier way to do this, or a way to make the top-left-border perfectly round?
Add overflow: hidden; to .shape. Position top-left relatively. Done!
.box {
width: 200px;
height: 200px;
background: red;
position: relative;
top: 40px;
}
.shape {
width: 250px;
height: 250px;
background: navy;
border-radius: 50%;
position: absolute;
left: 75px;
top: 50px;
overflow: hidden;
}
#top-left {
width: 150px;
height: 150px;
background: purple;
position: relative;
left: -25px;
}
<div class="box">
<div class="shape">
<div id="top-left"></div>
</div>
</div>
Output :