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;
}
Related
I am trying to create an element which is a half-circle with a complete circle border. Like this:
I have no problem doing it with using 2 elements, but don't fully understand how to do it within one DIV.
Right now all I have is a half circle:
.element {
height: 10px;
width: 10px;
border-bottom-left-radius: 20px;
border-top-left-radius: 20px;
background-color: #00a680;
}
You can simply use gradient:
.box {
width: 150px;
height: 150px;
border: 15px solid #00a680;
border-radius: 50%;
padding: 15px;
background: linear-gradient(to right, #00a680 50%, transparent 0) content-box;
box-sizing:border-box;
}
<div class="box">
</div>
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'm trying to create a circle with CSS, which looks exactly like on the following picture:
...with only one div:
<div class="myCircle"></div>
and by using only CSS definitions. No SVG, WebGL, DirectX, [...] allowed.
I've tried to draw a full circle and fading half of it with another div, and it does work, but I'm looking for a more elegant alternative.
You could use border-top-left-radius and border-top-right-radius properties to round the corners on the box according to the box's height (and added borders).
Then add a border to top/right/left sides of the box to achieve the effect.
Here you go:
.half-circle {
width: 200px;
height: 100px; /* as the half of the width */
background-color: gold;
border-top-left-radius: 110px; /* 100px of height + 10px of border */
border-top-right-radius: 110px; /* 100px of height + 10px of border */
border: 10px solid gray;
border-bottom: 0;
}
WORKING DEMO.
Alternatively, you could add box-sizing: border-box to the box in order to calculate the width/height of the box including borders and padding.
.half-circle {
width: 200px;
height: 100px; /* as the half of the width */
border-top-left-radius: 100px;
border-top-right-radius: 100px;
border: 10px solid gray;
border-bottom: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
UPDATED DEMO. (Demo without background color)
I had a similar issue not long time ago and this was how I solved it
.rotated-half-circle {
/* Create the circle */
width: 40px;
height: 40px;
border: 10px solid black;
border-radius: 50%;
/* Halve the circle */
border-bottom-color: transparent;
border-left-color: transparent;
/* Rotate the circle */
transform: rotate(-45deg);
}
<div class="rotated-half-circle"></div>
Below is a minimal code to achieve the effect.
This also works responsively since the border-radius is in percentage.
.semi-circle{
width: 200px;
height: 100px;
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
border: 10px solid #000;
border-bottom: 0;
}
<div class="semi-circle"></div>
I use a percentage method to achieve
border: 3px solid rgb(1, 1, 1);
border-top-left-radius: 100% 200%;
border-top-right-radius: 100% 200%;
Add a border to the semi-circle and remove the border-bottom
#semi-ring{
height: 100px;
/* width = 2* height */
width: 200px;
border: 30px solid black;
/* border-radius = height + border */
border-radius: 130px 130px 0 0;
border-bottom: transparent;
}
<div id="semi-ring"></div>
An idea using gradient:
.box {
width: 200px;
aspect-ratio: 2;
border-radius: 999px 999px 0 0;
background: radial-gradient(50% 100% at bottom,#0000 80%,red 80.5%);
}
<div class="box"></div>
How can I make the following shape in CSS3, without using pseudo-classes like ":before"?
I did it very easy with :before, but the thing is that I don't want to have a solid element on the gray area (see JSFiddle - http://jsfiddle.net/aUdLr/2/)
div{
width: 100px;
height: 100px;
background-color: red;
border-radius: 100%;
position: relative;
}
div:before{
content: "";
width: 100%;
height: 110%;
background: gray;
position: absolute;
left: 5px;
top: -5%;
border-radius: 100%;
}
You can use border width:
div{
width: 100px;
height: 100px;
border-radius: 100%;
border-width: 0;
border-left:solid 10px red;
}
Scientifically inaccurate example: http://jsfiddle.net/aUdLr/4/
Keep in mind that the outer shape is not a perfect circle, because the border is added to the width. You can compensate by reducing the width, or by using Box-sizing: Border-box.
To get the effect of a small circle eclipsed by a larger circle, you can add a shadow to a transparent element:
div{
width: 100px;
height: 100px;
border-radius: 100%;
background-color:transparent;
box-shadow: -23px 0 0px -15px #ff8;
}
Example: http://jsfiddle.net/aUdLr/6/
Simplest CSS3 solution that comes to my mind:
div:before {
font: 80px serif;
color: red;
content: "(";
}
Here's a fiddle.
(Now seriously- if you want a good amount of control over the shape, I suggest to use SVG.)
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;
}