This question already has answers here:
Can I create a div with a Curved bottom?
(5 answers)
Closed 1 year ago.
I am trying to make a half circle on the screen over which I can put buttons and other things just like AdminBro top blue color circle but a little bit smaller. I did it like this:
.navbar {
position: relative;
overflow: hidden;
}
.eclipse {
position: absolute;
width: 200vw;
height: 200vw;
left: -50vw;
top: -180vw;
background-color: #41B3A3;
border-radius: 100vw;
}
<div id="root">
<div class="navbar">
<div class="eclipse"></div>
</div>
</div>
As you can see this is a react application. The thing is I am not getting the desired result please tell me why?
There's an easier way to this. You can simply use clip-path property of CSS.
Create a div element with a background color below body tag and give it an absolute position and full width and height. Then use clip-path to create a create clipping path.
HTML
<div class="ellipse"></div>
CSS
.div {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: cyan;
clip-path: ellipse(80% 50% at 50% 5%);
}
You can play around with the values. Also this clip-path generator is a useful tool.
I am not quite sure if I understand your question, but if you just want to make a half circle, try this:
.half-circle {
width: 200px;
height: 100px; /* needs to be half of the width */
border: 10px solid black;
border-bottom: none;
background: green;
border-radius: 110px 110px 0 0;
}
Note, how the border-radius is 100px (height) + border-width (10px). If you don't need a border the border-radius of the top two corners is just equal to your height.
Related
I am getting some residual overflow from my simple layout below. Though minimal, the effect is quite obvious and happens only where I set a border radius. The expected behavior is to have the div class='inner', the white, fully cover div class='outer', the red. However there clearly seems to be residual overflows from both ends of the div.
Example:
.outer {
background-color: red;
width: 500px;
height: 50px;
position: relative;
overflow: hidden;
border-radius: 5rem;
}
.inner {
background: white;
width: 100%;
height: 100%;
position: absolute;
}
<div class="outer">
<div class="inner"></div>
</div>
I am using this as part of a loading bar effect where inner translates as part of an animation during a media play. I have read a couple other problems that involve adding properties like z-index and adding masks but does not work for me. Also read issues with webkit, but have not found anything that works in the case above.
Edit
For clearer illustration refer below:-
Overflow hidden is being used so that when inner translates, any overflow is hidden out of the parent div. I am unsure if there are any other ways I can use. Below is an example of having the x-axis translate at 10%. I am trying to achieve the overflow effect without any bleeding from the edges around where border radius is applied.
Translate starts at 0% which is the same as the example above.
This issue was also reported - Issue 491574: border-radius bleeds background-color
And similar to the question - CSS border radius background colour bleed but the use case of overflow does not apply to my case.
.outer {
background-color: red;
width: 500px;
height: 50px;
position: relative;
border-radius: 5rem;
overflow: hidden;
}
.inner {
background: white;
width: 100%;
height: 100%;
position: absolute;
transform: translateX(10%);
}
<div class="outer">
<div class="inner"></div>
</div>
The code above though not in exact flavor is embedded in an app written in ReactJS and I am facing this issue both in Chrome and Mozilla.
The answer I suggested as a duplicate mentions:
The fix would be on a case by case basis... it would be matter of rearranging the elements such that they are a top and bottom rather than a parent and child.
So here is your case fix. You have to have the background red color into a child of the container element... And the progressbar on top of it. Now that the container doesn't have any background color, nothing can bleed due to the anti-aliasing.
Additionnally, if you apply the same border-radius to the "background" div... And a 1px white border... The magic is made.
Below, I animated the width of the .progress-bar on an interval to simulate you react state based animation.
// Simulating an animation... Just for this demo.
let outer = document.querySelector(".outer")
let progress = document.querySelector(".progress-bar")
let outerWidth = outer.getBoundingClientRect().width
let progressWidth = progress.getBoundingClientRect().width
let interval = setInterval(function(){
progressWidth = progress.getBoundingClientRect().width
progress.style.width = progressWidth + 10 + "px"
if(progressWidth > outerWidth) clearInterval(interval)
},500)
.outer {
background-color: transparent;
width: 500px;
height: 50px;
position: relative;
border-radius: 5rem;
overflow: hidden;
}
.progress-background {
background: red;
width: calc(100% - 2px); /* to compensate the white border space */
height: calc(100% - 2px); /* to compensate the white border space */
position: absolute;
border-radius: 5rem; /* Same radius than the container */
border: 1px solid white; /* white border */
}
.progress-bar {
background: white;
width: 0;
height: 100%;
position: absolute;
transition: width 1s; /* Just to have the animation a bit smooter */
}
<div class="outer">
<div class="progress-background"></div>
<div class="progress-bar"></div>
</div>
This question already has answers here:
div with triangle at the bottom with background image
(3 answers)
Closed 1 year ago.
Hi guys I'm wondering how to make this in HTML and CSS. I know the obvious way is to make a triangular shape image in the bottom but it feels wrong. Is it possible to do it in HTML and CSS?
Edit: This is a Photoshop Design Mockup and I already said I have one solution but it feels wrong just wanted to know if somebody has another possible solution.
I'd go with clip-path to achieve something like this.
.clipped {
clip-path: polygon(100% 0%, 100% 70%, 50% 90%, 50% 90%, 0 70%, 0 0);
}
img {
max-width: 100%;
width: 100%;
}
<div class="clipped">
<img src="https://loremflickr.com/1280/720">
</div>
There's this great tool to easily generate the clip-path params:
https://bennettfeely.com/clippy/
I can't explain this at all without drawing it for you. Here is how you do it maybe someone else can fill in the blanks.
Instead of thinking about how to get a background image inside of the triangle make your background image hang lower than you need it to and put two black triangles on the top of the row bellow the image. That way it provides the illusion that your background is hanging below, when in reality you are just hiding most of it.
.arrow-up {
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid black;
}
<div class="arrow-up"></div>
#JordiNebot answer is where I think we'd like to eventually land, but clip-path hasn't been completely included yet. If you want to make sure it runs well everywhere, I would do something along the lines of the following. Create two triangles built from the middle out-ward well beyond what you would expect to need, then place them in absolute position at the bottom middle of the div containing the image.
It's considerably more work, but it will work better across all platforms.
.main {
position: relative;
overflow: hidden;
width: 100%;
}
.leftArrow {
position: absolute;
width: 0;
right: 50%;
height: 0;
bottom: 4px;
border-right: 500px solid transparent;
border-bottom: 100px solid black;
}
.rightArrow {
position: absolute;
left: 50%;
bottom: 4px;
width: 0;
height: 0;
border-left: 500px solid transparent;
border-bottom: 100px solid black;
}
img {
max-width: 100%;
width: 100%;
}
<div class="main">
<img src="https://loremflickr.com/1280/720">
<div class="leftArrow"></div>
<div class="rightArrow"></div>
</div>
This question already has answers here:
Shape with a slanted side (responsive)
(3 answers)
Skewed Borders on a Div
(2 answers)
Closed 7 years ago.
I want to create a div with its right corner raised a little bit up. I have tried using it with borders but in vein. Please take a look at the picture and any suggestions will be appreciated :)
I have used css3 skew but it didn't work for me as I wanted
Ok, have found a way to achieve this with border and not with skew.
Here is my code...
.box {
width: 300px;
height: 200px;
background: red;
margin: 50px 0 0;
}
.box:before {
content: "";
width: 100%;
height: 0;
border-top: 30px transparent solid;
border-right: 300px green solid;
}
<div class="box"></div>
But now another issue. The code above is useful for anyone who wants to make divs with fixed widths. What if I want to use this div as 100% of width but I cannot add % in the border in my css.
Any suggestions will be appreciated :)
Maybe you want something like this?
I used Three divs. A parent div, and two divs inside the parent div:
HTML:
<div class="container">
<div class="top"></div>
<div class="main"></div>
</div>
CSS:
body {
margin:50px;
min-width:400px;
background:white;
}
.container{
width: 300px;
}
.top{
with: 100%;
height: 0;
border-bottom: 50px solid red;
border-left: 300px solid transparent;
}
.main {
background-color: red;
width: 100%;
height: 200px;
}
FIDDLE
I can't seem to get the black box to the center of the screen as opposed to the center of the div its inside in.
EDIT: For clarification, I only want the black box in the center of the results panel not the pink box with it. Also I would also like to keep my javascript intact.
EDIT 2: I'm trying to have something like an overlay that popsup in the middle of the screen when a user clicks on the image. Not sure if this is the best way or the best code to achieve that!
Would appreciate if anyone can help.
Here's my attempt: http://jsfiddle.net/BPLcv/1/
HTML
<div class="tooltip">
<div class="description">Here is the big fat description box</div>
</div>
<div class="tooltip">
<div class="description">Poop</div>
</div>
CSS
.tooltip {
position: relative;
border: 1px #333 solid;
width: 200px;
height: 200px;
background-image: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSkI2PXYOOOHltHwgIz6xwfuN079IAJDLsmOV68rQNNLCE-GFZ1_aQN89U');
}
.overlay {
position: absolute;
display: none;
background-color: rgba(0, 0, 0, 0.7);
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.description {
position: absolute;
width: 300px;
height: 300px;
display: none;
background-color: black;
text-align: center;
z-index: 1;
/* centering???? */
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -75px;
}
Thank you!
If you want the description/overlay in the middle of the screen, your best bet is to use an element outside of your tooltip-elements, as these are fixed width.
If you have a top-element with width: 100%, your centering css wil work for any immidiate children.
Working fiddle: http://jsfiddle.net/BPLcv/4/
Here the overlay is filled with whatever is in the description element of the tooltip you're hovering:
overlay.html($(this).find(".description").html());
The description class is always hidden.
Check this Demo jsFiddle
CSS
body{
margin:auto;
width:50%;
}
Try this. Assign the div of interest id = CenterDiv, then add this css:
z-index:10;//remove left:50%
Now try adding this function via onload or onclick, etc:
function centerDiv() {
document.getElementById("CenterDiv").style.marginLeft = ((screen.availWidth - 300)
/ 2) + 'px';
}
The number 300 can be any number that represents the width of your element of interest.
Substituting the width of your element (here, 300px), this function will center an element with absolute position.
Please excuse me if this question has been answered before, but I couldn't find an answer when searching.
Essentially what I'm trying to do is to create a header bar which is 107px high and spans 100% width of the page with a split in colour 50% (50% the left is white, 50% on the right is green) along its width. I have been able to accomplish this using CSS gradients, however I work in the education sector and schools seem to be reluctant to use anything but legacy versions of IE and so, inevitably, it doesn't work properly.
Is there anyway to do this which is IE friendly or is there any kind of work around that can give me the same or similar results?
Thanks in advance!
You have a couple of options:
Use a background image (5px high, really wide, left half is white, right half is green) - it'll cost you less than 100 bytes.
Why not use two divs (floated left, both 50% width)?
Here is the HTML:
<div class="header">
<div style="background: white;">
white bg
</div>
<div style="background: green;">
green bg
</div>
</div>
Here is the CSS:
.header { overflow: hidden; height: 107px; border: 1px solid #000;}
.header div { float: left; width: 50%; height: 100%;}
http://jsfiddle.net/PUWCh/
Like this? http://jsfiddle.net/2gGdD/
I'm using pseudo selectors (works back to IE8) to create each half and layer them behind the div with a negative z-index so you can place content on top of them.
.header {
height: 107px;
position: relative;
width: 100%;
}
.header:before,
.header:after {
content: '';
height: 100%;
position: absolute;
width: 50%;
z-index: -1;
}
.header:before {
background: red;
left: 0;
}
.header:after {
background: blue;
right: 0;
}