As you can see in the image above it's a semi circle spanning the width of the page and contains the text WATCH IT FIRST. So after playing around for a long time with border-radius values I was not able to achieve this specific shape. I'm very tired and it didn't dawn on me that it isn't a perfect semi-cirlce. It's stretched and I have no idea how to achieve that look. Any help would be so, so very appreciated. Thanks.
EDIT: I found many questions asking about semi-circles but not stretched.
div {
background: transparent;
width: 400px;
height: 40px;
margin-top: 70px;
z-index: 1;
position: relative;
}
div:after{
content: "CONTENT GOES HERE";
color: white;
text-align: center;
position: absolute;
height: 100px;
left: 0px;
right: 0px;
bottom: 100%;
background-color: black;
border-bottom-left-radius: 50% 70px;
border-bottom-right-radius: 50% 70px;
clip: rect(0px, 400px, 100px, 0px);
}
<div></div>
Source: Negative borders (css)
border-bottom-left-radius and border-bottom-right-radius is what you need. Simply put them to 50% or whatever your requirement, depending on your height to make it a perfect semi-circle.
I didn't really get your question, but I think this is what you're talking about.
None of the current answers really worked for me because the red semi-circle was gonna be in a div and I kept having problems with it colliding with other children. But after tweaking Lorddirt's answer I was able to make it work.
.red-banner {
background: #dc3545;
color: white;
width: 100%;
height: 120px;
border-bottom-left-radius: 50% 120px;
border-bottom-right-radius: 50% 120px;
font-size: 3.2rem;
padding-top: 20px;
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
</head>
<body>
<div class="bg-white text-center">
<div class="red-banner">WATCH IT FIRST</div>
</div>
</body>
</html>
Related
I have created a circular vertical progress bar which fills vertically on page level progress. For this I have created two divs(outer div and inner div) and I have made the circular outer div using border radius 50% and overflow hidden and the inner div with square shape and width greater than the width of outer div. So on the completion of the page the height of the inner div increases and it gives the effect of filling of circular outer div as the edges of the inner div gets hide by the overflow property of the outer div. Its working fine in desktop and IPad but not in the other touch devices(mainly mobile devices). I am adding the snippet of the css and HTML that I am using. There are similar questions available on stackoverflow but none of the answer solved my problem, so plese don't take it as a duplicate answer, thanks.
#progress-container {
position: absolute;
top: 100px;
left: 100px;
}
#progress-indicator-outer {
position: absolute;
width: 25px;
height: 25px;
border: 2px solid #fff;
border-radius: 50%;
background: #999999;
overflow: hidden;
}
#progress-indicator-inner {
position: absolute;
bottom: 0px;
width: 28px;
height: 12.5px;
margin: 0px 0 0 -2px;
background: #007BAf;
}
<div id="progress-container">
<div id="progress-indicator-outer">
<div id="progress-indicator-inner"></div>
</div>
</div>
This appears to be caused by browsers parsing the tag. To solve this problem at the source, try the following:
<meta name="viewport" content="width=device-width, initial-scale=1,
minimum-scale=1">
original answer
Some things to note:
You don't need all these position: absolute;. Try to avoid them.
Decimal pixel values are highly discouraged
The width of your inner element was not correct. If your outer is 26px, and you want to move the inner two px left, that means you also need 2px on the other side, ending up at 30px
I tested the following and this works on my mobile devices
#progress-container {
position: absolute;
top: 100px;
left: 100px;
}
#progress-indicator-outer {
width: 26px;
height: 26px;
border: 2px solid #fff;
border-radius: 50%;
background: #999999;
overflow: hidden;
}
#progress-indicator-inner {
position: relative;
width: 30px;
height: 13px;
top: -2px;
left: -2px;
background: #007BAf;
}
<div id="progress-container">
<div id="progress-indicator-outer">
<div id="progress-indicator-inner"></div>
</div>
</div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
It seems something like this has been addressed before, but most of what I'm finding is for the more generic issue that doesn't pertain to most browsers today. I'm encountering the known IE issue where using border-radius with a border and a background (a color in my case) results in the background bleeding beyond the border.
I'm wondering if there is a workaround that actually can mask this issue... Some of the things I've tried:
<meta http-equiv="X-UA-Compatible" content="IE=10" />
overflow:hidden on the parent
background-clip:border-box
adding .1 to the border-radius
None of these have worked. Is there another workaround (other than "use images") while I wait for yon IE team to fix things?
I've created a fiddle that illustrates this well and documents what I've found in more detail.
I have experienced this before.
I recommend instead styling the border with CSS generated content, in a manner such as this:
.redcircle::after {
content:'';
display:block;
left:0;
top:0;
right:0;
bottom:0;
border-radius:100px;
border:10px solid yellow;
position:absolute;
pointer-events: none; //ensures no clicks propogate if this is desired
}
You can crate an ::before or ::after CSS Pseudo and make your background: red; on them. Set your width, height and border-radius on 100% and for example don't change z-index to -1, you can see his get the inside width and hight and don't bleeding out.
Screenshot from Explorer 9 on Vista
And now for example (how its look without z-index play):
body {
background: white;
}
.bluebox {
background: blue;
width: 200px;
height: 200px;
}
.redcircle {
position: absolute;
left: 140px;
top: 40px;
text-align: center;
height: 100px;
width: 100px;
border-radius: 100px;
font-size: 100px;
line-height: 100px;
color: black;
border: 10px solid yellow;
}
.redcircle::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 100%;
background: red;
}
<div class="bluebox">
<div class="redcircle">
!
</div>
</div>
And this one for using:
body {
background: white;
}
.bluebox {
background: blue;
width: 200px;
height: 200px;
}
.redcircle {
z-index: 1;
position: absolute;
left: 140px;
top: 40px;
text-align: center;
height: 100px;
width: 100px;
border-radius: 100px;
font-size: 100px;
line-height: 100px;
color: black;
border: 10px solid yellow;
}
.redcircle::before {
z-index: -1;
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 100%;
background: red;
}
<div class="bluebox">
<div class="redcircle">
!
</div>
</div>
Fiddle Demo
Borrowing from Zeev's answer, which moves the background-color to a :before or :after (which only substitutes a subpixel gap for a subpixel bleed, and across more browsers), and Phil's answer, which moves the border to an :after (which didn't really fix the problem).
Move the background-color to a :before as suggested by Zeev, but give it padding equal to the border-width minus two (or use calc()). Then give it negative top and left positioning with that same amount.
Then move the border to the :after but give it negative top and left positioning equal to the border-width.
This creates an oversized background and recenters it below the content. Then it creates an oversized border and centers it around the content. You could probably oversize the background to other degrees and get the same result. The point is to make it bigger than the hole inside the border, but smaller than the outside of the border. This, naturally, would fail with thin borders, though.
body {
background: white;
}
.bluebox {
background: blue;
width: 200px;
height: 200px;
}
.redcircle {
z-index: 1;
position: absolute;
left: 150px;
top: 50px;
text-align: center;
height: 100px;
width: 100px;
border-radius: 100px;
font-size: 100px;
line-height: 100px;
color: black;
}
.redcircle::before,
.redcircle::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 100%;
}
.redcircle::before {
z-index: -1;
background: red;
top: -8px;
left: -8px;
padding: 8px;
}
.redcircle::after {
top: -10px;
left: -10px;
border: 10px solid yellow;
}
<div class="bluebox">
<div class="redcircle">
!
</div>
</div>
background-clip fixes this issue:
.bluebox {
background-clip: padding-box;
}
I was wondering if it is possible to make a square with round corners and a indented border in pure CSS.
Currently I have this:
#custom-square {
position: relative;
display: block;
width: 75px;
height: 75px;
border: 2px solid #8A6EF1;
border-radius: 10px;
background-color: white;
}
Considering the hassle and amount of code needed to align double curves with CSS, SVG seems way more appropriate. A few other reasons to go for svg here are :
control of the path (color, width, curve...)
control the fill with a plain color, gradient or image
less code
you can display it over a non plain background (gradient or image)
maintain the boundaries of the shape for user interactions (hover, click...)
Here is a basic example using an inline svg with a path element.
The curves are drawn with Cubic Bezier curves :
svg{width:30%;}
<svg viewbox="0 0 10 10">
<path d="M1.5 0.5 Q5 1 8.5 0.5 Q9.5 0.5 9.5 1.5 Q9 5 9.5 8.5 Q9.5 9.5 8.5 9.5 Q5 9 1.5 9.5 Q0.5 9.5 0.5 8.5 Q1 5 0.5 1.5 Q0.5 0.5 1.5 0.5z"
fill="none" stroke-width="0.2" stroke="#8A6FF2" />
</svg>
Another pure CSS approach for creating this border would be to make use of border-image property. All that is required is create an image with the required border shape and set it to an element using the border-image-source property.
.shape.large {
height: 300px;
width: 300px;
border-image-source: url(http://i.stack.imgur.com/Qkh6A.png);
border-image-width: 34px; /* the width of the border portions in the image - refer to image at the end of the answer for the exact portion details*/
border-image-slice: 34; /* equal to border-image-width */
border-width: 34px; /* equal to border-image-width */
}
.shape.small {
height: 100px;
width: 100px;
border-image-source: url(http://i.stack.imgur.com/Mra4B.png);
border-image-width: 14px;
border-image-slice: 14;
border-width: 14px;
}
.shape.small.fill {
background: aliceblue content-box;
border-image-source: url(http://i.stack.imgur.com/Ovj03.png);
border-width: 14px;
}
/* Just for demo */
body {
background: url(http://lorempixel.com/800/800/abstract/2);
}
.shape.small {
float: left;
}
.shape.large {
clear: both;
}
<div class='shape small'>Some content</div>
<div class='shape small fill'>Some content</div>
<div class='shape large'>Some content</div>
At present this method is definitely not much advantageous compared to SVG but it is an option and in my opinion is better than the other CSS only approaches that are possible.
The advantages of this approach are:
Very minimal and low complexity code.
Better control over the curves and their radii (like with SVG) because the image with the required border curvature can be created separately.
Can be placed on top of an image or a gradient background.
Can be made to degrade gracefully (into a solid square border) in browser's that don't support it.
The drawbacks are:
The container is still a square and so hover effects will not be restricted to the boundaries of the shape unlike with SVG.
Adding solid color fill to the shape is possible (by using a filled version of the image) but adding a gradient or image fill is tricky because borders are still blocks (that is, there are transparent areas on either side of the curves).
The output is responsive but as dimensions increase or decrease beyond a threshold, the shape starts to look a bit compressed or stretched. So, this is more suited for break-point based design.
The browser support is not bad but is not great either. It works in Chrome, Firefox, Safari, Opera and IE11+.
Calculation of Border Image Width:
The width or height of border area (which becomes the border-image-width) is nothing but the width of the portion highlighted in the below image.
This draft mock up is as close as i could get it to pure CSS, but still requires a nested div. You would need to tweak the sizing / radius for the before / after circles.
Pen
div {
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
border: 4px solid purple;
border-radius: 30px;
//overflow: hidden;
box-sizing: border-box;
&:before {
position: absolute;
top: -4px;
left: -94px;
content: ' ';
width: 100px;
height: 100px;
border: 4px solid purple;
border-radius: 50px;
box-sizing: border-box;
background-color: white;
clip: rect(0px, 100px, 100px, 90px);
}
&:after {
position: absolute;
top: -4px;
right: -94px;
content: ' ';
width: 100px;
height: 100px;
border: 4px solid purple;
border-radius: 50px;
box-sizing: border-box;
background-color: white;
clip: rect(0px, 10px, 100px, 0px);
}
}
div > div {
position: absolute;
top: -4px;
left: -4px;
transform: rotate(90deg);
border-color: transparent;
}
SVG is probably the way to go here, but here's a pretty close approximation in pure CSS. It could be made even better by increasing the size of the outer circles.
#middle {
width: 96px;
height: 96px;
border-radius: 10px;
background-color: green;
border: 2px solid #8A6EF1;
}
.outside {
width: 100px;
height: 100px;
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
}
.cutout {
width: 96px;
height: 96px;
border-radius: 50%;
background-color: white;
border: 2px solid #8A6EF1;
}
#top {
top: -100px;
height: 10px;
}
#right {
top: -110px;
left: 90px;
width: 10px;
}
#bottom {
top: -120px;
height: 10px;
}
#left {
top: -220px;
width: 10px;
}
#top > .cutout {
margin-top: -90px;
}
#left > .cutout {
margin-left: -90px;
}
<div id="wrapper">
<div id="middle">
</div>
<div id="top" class="outside">
<div class="cutout">
</div>
</div>
<div id="right" class="outside">
<div class="cutout">
</div>
</div>
<div id="bottom" class="outside">
<div class="cutout">
</div>
</div>
<div id="left" class="outside">
<div class="cutout">
</div>
</div>
</div>
I am trying to code the attached layout (needs to be responsive and not use JavaScript if possible). I want to support IE8, or if not, a gracefully degrading solution would be great.
I found ways to make the semicircle cutout using pseudo-elements and border-radius, but the background image of the previous div needs to show through and I can't figure out how to do it. Please help!! I have highlighted the area covered by the background image, in case it is not clear. Here is the layout
I got this far: https://jsfiddle.net/dcwoLb7f/
HTML:
<div id="first"><p>IMAGE CREDIT: WIKIPEDIA</p></div>
<div id="second"></div>
CSS:
#first {
background-image: url('http://upload.wikimedia.org/wikipedia/commons/5/5a/VirtuellesStudio_Greenbox.jpg');
background-size: cover;
position: relative;
}
p {
color: white;
text-align: center;
margin: auto;
font-size: 40px;
}
#first, #second {
width: 100%;
height: 200px;
}
#second {
background-color: blue;
}
#first:after {
content: '';
background-color: white;
height: 40px;
width: 40px;
border-radius: 100%;
position: absolute;
bottom: -20px;
left: 50%;
transform: translate(-50%, 0);
}
Here's what I have right now:
background: #FFFFFF url("whitegrid.png") repeat left top;
Here's what I want to achieve.
How do I achieve this split background effect, maintaining the repeating pattern on both colors, and making the top color only fill a fixed percentage (eg. 30%) of the page?
Thanks.
may this help you :
Use CSS Gradient Generator
but pay attention that this supports only in modern browsers
sometimes you can make 2 div like layers:
<div class="gradient">
<div class="pattern">
</div>
</div>
Demo: http://jsfiddle.net/techsin/VpyRy/1/show/
i am not sure if what you are asking is what i am understanding...but if it's as simple as it sounds then background is composed of two divs. You could use multiple backgrounds/images but divs are much easier and appropriate here. http://jsfiddle.net/techsin/32gPX/
*{margin: 0;padding: 0;}
html,body{width: 100%;height: 100%; position: relative;}
body { background-color: red;}
.nav {height: 50px; background-color: rgb(64, 47, 71);}
.main {
width: 480px; padding: 40px; background-color: white; height: 400px; margin: auto; margin-top: 30px;
}
.white {
background-color: orange; width: 100%; height: 200px;
position: absolute; top: 50px; z-index: -1;}