I have this shape as a PNG that I would like to create it with CSS so that I can dynamically change the fill color.
My question is: How can I most effectively recreate this image using only divs and CSS?
Note that there is a 5px white stroke around the orange fill. That stroke needs to be created as well. And the area to the right of the curve on the right needs to be transparent. Your CSS can not use external assets such as background images.
Ideally the CSS would work in the majority of browsers including IE 7, 8 and 9. But that's not absolutely required.
Go forth you CSS wizards and show me your darkest dirtiest CSS secrets. I will be putting a bounty of 50 on this as soon as the site allows me, and will award that fully to the best answer, regardless of when you submit you answer.
Let's see what you've got.
HTML
<div id="css"></div>
CSS
#css {
width: 118px;
height: 74px;
margin: 20px 20px;
background: red;
border: 6px solid white;
border-radius: 20% / 62%;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
Live example
I dare you to guess which one is which without looking at the HTML ;)
This version is also compatible with IE9...
HTML
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<div id="image">
</div>
CSS:
#image{
background:orange;
border: 5px solid white;
-moz-border-radius: 20% / 60%;
-webkit-border-radius: 20% / 60%;
border-radius: 20% / 60%;
-moz-border-top-left-radius: 0px;
-moz-border-bottom-left-radius: 0px;
-webkit-border-top-left-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
height:100px;
width:150px;
}
just put the correct color, eventually change the dimensions
#shape {
width: 200px;
height: 150px;
background: orange;
border: 5px solid white;
border-radius: 15% / 50%;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
Related
This question already has answers here:
Border-radius in percentage (%) and pixels (px) or em
(3 answers)
Closed 2 years ago.
I want to round left and right side of the button like below
Notice that its straight line from top and bottom and only rounded from both sides.
button{
background: transparent;
border: 2px solid black;
font-size: 25px;
border-radius: 50%;
width: 200px;
padding: 5px;
}
<button>View All</button>
I have tried to use border-radius:50% but it made the whole button rounded.
Try like this.
button{
background: transparent;
border: 2px solid black;
font-size: 25px;
border-radius: 999px;
width: 200px;
padding: 5px;
}
<button>View All</button>
You can define a different border radius for the left/right side's of the div.
Try:
button{
background: transparent;
border: 2px solid black;
font-size: 25px;
border-radius: 10%/50%;
width: 200px;
padding: 5px;
}
<button>View All</button>
And experiment with variations of border-radius: 10%/50% like border-radius: 20%/40%...
You can specify each of the four corners radius with two percentages, ie: top-left, bottom-left, top-right & bottom-right. One for each corners horizontal and vertical semi-major and semi-minor axes of the ellipse.
button{
background: transparent;
border: 2px solid black;
font-size: 25px;
border-top-left-radius: 17.5% 50%;
border-bottom-left-radius: 17.5% 50%;
border-top-right-radius: 17.5% 50%;
border-bottom-right-radius: 17.5% 50%;
padding: 10px 25px;
}
<button>View All</button>
See the following Mozilla article for further explanation: MDN: border-radius
Is that possible in CSS?
If yes, how to do this? I tried with border-top-left-radius but its not the same.
You can get pretty close setting the length and the percentage for border-*-*-radius.
div {
width: 100%;
height: 200px;
background-color: red;
border-top-left-radius: 50% 20px;
border-top-right-radius: 50% 20px;
}
Here's a quick demo: https://jsfiddle.net/crswll/wqsebkpz/1/
and one with an image as proof that it works: https://jsfiddle.net/crswll/wqsebkpz/2/
You can find more details here: https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius#Formal_syntax
I think border-radius: 10px 10px 0px 9px; is what you are looking for.
Combiner the border radius with the size of your element and add specific tags for moz and other browsers.
example here
html
<div class="banner">
</div>
css class
.banner{
background-color:black;
width:100%;
border-radius:40px 40px 0px 0;
height:40px;
}
https://jsfiddle.net/w7o2rbcu/5/
you can be only paste following css to your code
blelow is example or visit https://codepen.io/Chandrakant1594/pen/yEpxOp
<style>
.curved-border {
height: 200px;
width: 400px;
background: #000000;
border: 3px solid;
box-shadow: inset 0px -1px 0px black; /* just to make the bottom border look thicker */
margin-bottom: 4px;
}
.sample1 {
border-radius: 1500% 1500% 280% 280%/280% 280% 40% 40%;
}
.sample2 {
border-radius: 0% 0% 100% 100%/0% 0% 30% 30%;
}
</style>
<div class='curved-border sample1'></div>
<div class='curved-border sample2'></div>
Try out with the border-radius generator https://border-radius.com
I'd like a CSS div with an arched top and a square (or slightly rounded corners) bottom.
Here's my CSS:
#oval {
width: 200px;
height: 500px;
background: red;
border-radius: 80px/20px 5px;
}
I also tried 80px/20px 80px/20px 5px 5px with no luck, and a bunch of other combinations. I've been testing in Firefox.
Any help would rock!
You could try this:
border-radius: 80px 80px 5px 5px / 20px 20px 5px 5px;
Try building out each corner separately like this
.oval {
width: 200px;
height: 500px;
background: red;
border-top-left-radius:200px;
border-top-right-radius:200px;
border-bottom-right-radius:0;
border-bottom-left-radius:0;
//border-radius: 80px/20px 5px;
}
Okay, here's the rule: border-radius: 85% 85% 5px 5px / 15% 15% 5px 5px;
Apparently, you specify all the horizontal radii for four corners, then all the vertical radii
I am trying to create an vertical semi oval shape using css.
I am using the following code to create a full vertical oval
#oval {
width: 100px;
height: 200px;
background: red;
-moz-border-radius: 50px / 100px;
-webkit-border-radius: 50px / 100px;
border-radius: 50px / 100px;
position: relative;
}
but I want to create it as only left part of this oval(like a 'D')
I trie using the following code but it gives me blunt edges.
#oval2{
height:200px;
width:50px;
border-radius: 0% 100% 100% 0%;
-moz-border-radius: 0 100% 100% 0;
-webkit-border-radius: 0 100% 100% 0;
background:green;
}
I want sharp edges as in a full oval . How can I achieve the same
Like so:
#oval {
width: 50px;
height: 200px;
background: red;
border-bottom-right-radius: 50px 100px;
border-top-right-radius: 50px 100px;
position: relative;
}
Note: I have set the properties of the corners independently as explained in the article: Border-radius: create rounded corners with CSS!.
See Demo.
It seems you can't use percentages to achieve (at least not for now) this but as long as you know your dimensions you'll be fine. You can do it like this: jsFiddle
#oval2 {
height:200px;
width: 50px;
border-top-right-radius: 50px 100px;
border-bottom-right-radius: 50px 100px;
background:green;
}
The W3C spec. indicates that border-radius: 100% should work as you'd like but it doesn't in chrome W3C spec.
Use the following code ,it will be helps you:
#oval {
width: 70px;
height: 100px;
background: red;
position: relative;
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
}
http://jsfiddle.net/XjsWZ/
I'm trying to get the white box itself to have rounded corners in addition to its transparent gray border using CSS3. Is this possible?
html:
<div class="outer"><div class="inner"></div></div>
css:
.outer{
width: 300px;
height: 300px;
border: solid 10px;
border-radius: 5px;
border-color: rgba(0, 0, 0, 0.5);
}
.inner{
border-radius 5px;
}
Bonus question:
What's with those black squares in the corners on Chrome?
EDIT: I found a discussion of the black squares: Weird border opacity behavior in Webkit?
http://jsfiddle.net/XjsWZ/3/ maybe?
** edit **
I prefer JamWaffles':
.outer{
width: 290px;
height: 290px;
border: solid 10px;
border-radius: 15px;
border-color: rgba(0, 0, 0, 0.5);
background-clip:padding-box;
background-color:white;
padding: 5px;
}
Or if you want different looking corners there's a variant of Jedidiah's:
.outer{
width: 300px;
height: 300px;
background-clip:padding-box;
background-color: rgba(0,0,0,0.5);
border: solid 10px rgba(0,0,0,0.5);
border-radius: 10px; /*if you reduce this below 9 you will get black squares in the corners, as of Chrome 14.0.835.163 m*/
}
.inner{
border-radius: 5px;
background-color: white;
height: 100%;
}
JamWaffles answer is cleaner but if you did want to achieve this with the nested div tags and a translucent border you could set a background colour on the outer div to match the border colour, you would also need to set background-clip: padding-box; so that the border and background do not overlap.
Example:
http://jsfiddle.net/XjsWZ/7/
css:
.outer{
width: 300px;
height: 300px;
background-clip:padding-box;
background-color: rgba(0,0,0,0.5);
border: solid 10px rgba(0,0,0,0.5);
border-radius: 5px;
}
.inner{
border-radius: 5px;
background-color: white;
display:block;
width: 100%;
height: 100%;
}
html:
<div class="outer"><div class="inner"></div></div>
This will change the look of the box a bit, but if the border radius is greater than the width of the border, you'll get inner rounded corners too.
Example here. I've removed the inner div as it's not needed for the example, as I have made the assumption you're nesting only to achieve the rounded effect.
In relation to the black squares in the corners, I don't get any at all with Chromium 12. You could try using a normal hex colour instead of an RGBA one. For your current colour, it's #808080, although I do appreciate the need for translucency; this is for a Facebox-style popup?
http://jsfiddle.net/XjsWZ/10/
It seems like this would be a good solution although it technically doesn't use a border, it maintains the correct alpha value while getting rid of the black squares in webkit:
css:
.outer{
width: 300px;
height: 300px;
background-clip:padding-box;
background-color: rgba(0,0,0,0.5);
border: solid 10px rgba(0,0,0,0.5);
border-radius: 5px;
}
.inner{
border-radius: 5px;
background-color: white;
display: block;
width: 280px;
height: 280px;
position: relative;
top: 10px;
left: 10px;
}
html:
<div class="outer"><div class="inner"></div></div>