This question already has answers here:
Transparent half circle cut out of a div
(8 answers)
Closed 8 years ago.
Does anyone have an idea how to apply a background (in css) as you can see on the picture attached ?
Thanks
div {
background:lightgreen;
width:100%;
height:200px;
position:relative;
text-align:center;
padding:100px 0 0 0;
box-sizing:border-box;
}
div:before {
content:'';
position:absolute;
background:white;
width:100%;
height:100px;
top:0;
left:0;
border-radius:40%;
transform:translatey(-50%);
}
<div>div</div>
Something like this?
#wrapper {
position: relative; /* position:absolute needs a relative parent */
}
#main {
width: 100px;
height: 50px;
background-color: green;
text-align: center;
}
#cutout {
width: 100px;
height: 50px;
border-radius: 50px / 25px; /* half of width / half of height
http://css-tricks.com/the-shapes-of-css/
remember to add vendor prefixes if necessary */
background-color: white;
position: absolute;
top: -30px; /* should be -25px, but a little padding looks nicer */
}
<div id='wrapper'>
<div id='cutout'></div>
<div id='main'><br>div</div>
</div>
Check the DEMO
<div id="wrapper">
<div id="inner"></div>
</div>
#wrapper {
width: 600px;
height: 300px;
margin: auto;
margin-top: 50px;
background-color: green;
overflow: hidden;
}
#inner {
width: 1200px;
height: 1200px;
border-radius: 600px;
background-color: #fff;
position: relative;
top: -1100px;
left: -300px;
}
Related
I need to make something like this , how can I make the square on the middle between this two? Here is the CSS and Photo
My Css
#up{
width:100%;
height:30%;
}
#down{
width:100%;
height:70%;
}
#square{
width:40px;
height:40px;
}
Can I setting the square without counting the percentage of the location of the middle line? (because I want to add all something like this into all sessions of the web , and the height of the session will responsive by the text length
You need to use position relative to outer div and position relative to inner div
here is the link how can you do it
fiddle
.one,
.two,
.three {
width: 100%;
height: 50px;
}
.one {
background: yellow;
position: relative;
}
.two {
background: green;
}
.three {
background: red;
}
.square {
position: absolute;
bottom: -10px;
right: 30px;
height: 20px;
width: 20px;
background: white;
}
<div class="one">
<div class="square">
</div>
</div>
<div class="two">
</div>
<div class="three">
</div>
You can have a <div> square as:
<div id="div1"></div>
in CSS:
#div1{
border: 1px red;
height: /*enter the height */
width: /* enter the width */
position: relative;
left: /*enter the distance */
right: /*enter the distance */
top: /*enter the distance */
bottom: /*enter the distance */
z-index: 100 /* make sure other div's have z index lesser than this div's */
}
Put the square INTO the second div, give it a position: absolute and a top: -20px (and left: Xpx- i.e. whatever you need/want).
You can easily do this with position:absolute to your small box div.
Here is the solution that can help you
body,
html {
height: 100%;
margin:0px;
}
#up {
width: 100%;
height: 30%;
background: red;
}
#down {
width: 100%;
height: 70%;
background: blue;
}
#square {
width: 40px;
height: 40px;
background: green;
position: absolute;
top: calc(30% - 20px);
margin: 0px auto;
left: 0px;
right: 0px;
z-index: 1;
}
<div id="up"></div>
<div id="down"></div>
<div id="square"></div>
This question already has answers here:
Is a CSS Arch using border-radius possible?
(5 answers)
Closed 6 years ago.
Can anyone explain me how make a rounded border div like
this image?
I tried but the result is not the same: the left and right side curves should be less hard.
Here it is my code snippet:
.cnt {
margin: 0 auto;
border: 1px solid grey;
width: 300px;
height: 150px;
position: relative;
background-color: #4a4d84;
}
.t {
position: absolute;
width: 100%;
height: 50px;
background-color: red;
bottom: 0;
}
.t::before {
content: "";
position: absolute;
width: 100%;
height: 70px;
top:-30px;
background-color: red;
border-radius: 50% 50% 0 0;
}
<div class="cnt">
<div class="t">
</div>
</div>
Can you help me?
You want the circle to be round and much wider than the parent, yet at the same or a similar aspect ratio, hide the overflow, and you can do it with a single element.
div {
width: 400px;
height: 300px;
background: blue;
position: relative;
overflow: hidden;
}
div:after {
content: '';
position: absolute;
top: 50%; left: 50%;
transform: translateX(-50%);
background: red;
height: 300%; width: 400%;
border-radius: 50%;
}
<div></div>
Increasing .ts width to 200% and having a larger border radius does the trick. You can now alter its height to adjust the curve.
.cnt {
margin: 0 auto;
border: 1px solid grey;
width: 300px;
height: 150px;
position: relative;
background-color: #4a4d84;
overflow: hidden;
}
.t {
position: absolute;
width: 200%;
height: 200px; /* Change this to adjust the curvature. */
top: 40%;
left: -50%;
background-color: red;
border-radius: 200%;
}
<div class="cnt">
<div class="t">
</div>
</div>
you can increase the width (as advised in other answers) of your pseudo and use a box-shadow to paint the upper part of the box:
div:before {
content:'';
position:absolute;
top:3em;
left:-5%;
right:-5%;
bottom:0;
box-shadow:0 0 0 8em turquoise;
border-radius:100% 100% 0 0%;
pointer-events : none; /* remove it from the way */
}
div {
box-sizing:border-box;
position:relative;
width:300px;
margin:auto;
border:solid;
font-size:20px;
padding:5em 1em 1em;
background:tomato;
color:white;
text-align:center;
font-variant:small-caps;
overflow:hidden;
}
<div>
Some text here
</div>
Another approach to use background-image:
.main {
width: 300px;
height: 200px;
position: relative;
/*
140% is x-axis,
50% is y-axis,
at 50% is x-position
90% is y-position
*/
background-image: radial-gradient(140% 50% at 50% 90% , #1F8698 0%, #1F8698 50%, #1DC0D6 50%, #1DC0D6 100%)
}
.main::after
{
content: "Text Here";
position: absolute;
bottom: 10%;
width: 100%;
text-align: center;
font-size: 25px;
color: white;
}
<div class='main'></div>
I am trying to design a landing page to link to 2 web apps. I am trying to make the design as visually attractive as possible. I think it would look good if the Divs containing the links were side-by-side at the centre of the screen, with their edges overflowing the left and right of the screen. I can then put a border-radius on them and some nice blocky colour:
Goal:
I have tried numerous options, including inline-block and overflow:hidden:
HTML
<div id="centre-pane">
<div class="app-btn">
<img src="icon.png">link text
</div>
<div class="app-btn">
<img src="icon2.png">link text
</div>
</div>
CSS
.app-btn
{
width:1000px;
height:320px;
display:inline-block;
border:10px solid black;
border-radius: 50px;
}
#centre-pane {
width:2000px;
margin:0 auto;
text-align:center;
overflow-x: hidden;
}
Is this possible? I have found several ways of getting them side-by-side (eg here) but nothing that also lets them overflow the screen.
Just using position absolute would do the trick.
I've added a wrapper but it may not be required.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,
html,
.wrapper {
height: 100%;
}
.wrapper {
position: relative;
}
.btn {
width: 45%;
height: 30%;
background: lightblue;
border: 2px solid blue;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.left {
left: 0;
border-radius: 0 25% 25% 0;
border-left: none;
}
.right {
right: 0;
border-radius: 25% 0 0 25%;
border-right: none;
}
<div class="wrapper">
<div class="btn left"></div>
<div class="btn right"></div>
</div>
You can achieve this with absolute positioning and negative margins (for the right item). You'll have to fix the size of the body though in order to achieve the effect. I've also added individual classes to the first and second item respectively (.app-btn-1 and .app-btn-2):
body {
width: 2000px;
overflow-x: hidden;
}
.app-btn {
width:1000px;
height:320px;
position: absolute;
border:10px solid black;
border-radius: 50px;
overflow-x: hidden;
}
.app-btn-1 {
left: -500px;
text-align: right;
}
.app-btn-2 {
left: 100%;
margin-left: -500px;
}
DEMO
NOTE: For my demo to look right in jsfiddle, I've quartered the sizes so you can see the effect in the small window
Here is the code you need:
.menu {
display: inline-block;
height: 200px;
width: 40%;
margin-top: calc(50% - 100px);
border: 2px solid red;
background-color: brown;
color: black;
text-decoration: none;
transition: all 0.5s;
}
#left {
float: left;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
margin-left: -10px;
}
#right {
float: right;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
margin-right: -10px;
}
.menu:hover {
background-color: gray;
border-color: brown;
color: red;
}
<div class="menu" id="left">Left</div>
<div class="menu" id="right">Right</div>
I made a
JS Fiddle for you.
I'm scratching my head over this one. I would like for the green rectangle to be underneath the yellow topbar.
http://jsfiddle.net/PY9ss/1/
HTML:
<div class="body">
<div class="topbar">
<div class="mid">
<div class="attention"></div>
</div>
</div>
</div>
CSS:
.body { background: gray; width: 100%; height: 800px;}
.topbar { background: yellow; width: 100%; height: 50px; position: fixed; top:0; left:0; z-index: 10; }
.mid { background: red; width: 400px; height: 40px; margin: 10px auto 0; position: relative; }
.attention { background: green; width: 100px; height: 40px; border: 1px solid black; position: absolute; top: 30px; left: 0; }
EDIT:
This is fixed by using z-index:-1; on .attention as answered. However, my actual problem was that I had a transparent red background which fooled me, if anyone runs into the same problem.
Just give it a z-index of -1.
Here's the fiddle: http://jsfiddle.net/PY9ss/2/
Does .attention { z-index: -1 } do what you want?
http://jsfiddle.net/thirtydot/PY9ss/3/
I have a a design problem. I have a centered logo on a page, What I want is a div centered between the left side of the page and te left side of the logo.
how could I achieve this using only css ?
Here is the example:
Take a look at this demo...
http://jsfiddle.net/UnsungHero97/7Z5fu/
HTML
<div id="wrapper">
<div id="box-left">
<div id="left"></div>
</div>
<div id="box-center">
<div id="center"></div>
</div>
</div>
CSS
html, body {
margin: 0 !important;
padding: 0 !important;
}
#wrapper {
width: 100%;
}
#box-center, #box-left {
width: 50%;
float: left;
}
#left {
border: 1px solid magenta;
height: 50px;
width: 50px;
position: relative;
left: 50%;
/* half of width of #left + half of margin-left of #center */
margin-left: -75px; /* 50/2 + 100/2 = 25 + 50 = 75 */
}
#center {
border: 1px solid magenta;
height: 50px;
width: 200px;
margin-left: -100px;
}
I hope this helps.
It will work if the logo width can be fixed, here’s the code.
HTML:
<div id="logo"><img src="https://encrypted.google.com/images/logos/ssl_logo.png"></div>
<div id="otherdiv"><img src="https://encrypted.google.com/images/logos/ssl_logo.png"></div>
CSS:
#logo {
width: 100px;
height: 50px;
position: absolute;
top: 50px;
left: 50%;
margin-left: -50px;
text-align: center;
}
#otherdiv {
text-align: center;
position: absolute;
top: 50px;
left: 0;
width: 50%;
margin-left: -50px; /* Half of the logo width */
}
#logo img,
#otherdiv img {
width: 100px;
}
#otherdiv img {
margin-left: 50px; /* Half of the logo width */
}
Here i have separate two divs that left and right, there is one div inside of the leftDiv that is X_div make it as width:20% and margin:0 auto. if resolution extend, x_div will also extend as per your requirement.
#leftDiv {
width:30%;
height:auto;
}
#leftDiv X_Div {
width:20%;
height:auto;
margin:0 auto;
}
#rightDiv {
width:70%;
height:auto;
}