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>
Related
I have a div which looks something like this:
.box{
box-sizing: border-box;
border: solid 0.01rem #2e2e2e;
border-radius: 3px;
width:100px;
height:100px;
background:red;
}
<div class="box"/>
And I'm trying to achieve this effect. How can I make this box look with such shadows from the inside of the div?
linear gradient
blur filter
absolute positioning
pseudo-elements
flexbox
.box {
box-sizing: border-box;
border-radius: 10%;
width: 100px;
height: 100px;
background: linear-gradient(270deg, red, #c10606);
position: relative;
}
.box:before {
position: absolute;
content: '';
top: 10%;
right: 10%;
bottom: 10%;
left: 10%;
background: linear-gradient(90deg, red, #c10606);
border-radius: 12%;
filter: blur(1px); /* optional for a softer effect */
}
/* optional layout and styling for box contents */
.box {
display: flex;
align-items: center;
text-align: center;
font-family: arial;
color: #ddd;
font-weight: bold;
}
.box * {
position: relative; /* puts interior content over the pseudo-element */
}
<div class="box">
<span>Interior content</span>
</div>
CSS box-shadow
I think the answer posted by #isherwood works as the best one for your use-case. But, there is a way to make the shadow show on the inside of the element by setting the last parameter of box-shadow as inset.
There are a few catches for this solution though. A few things which I could not achieve:
I am unable to implement linear gradient to the shadow.
I am unable to give a border-radius to the inner boundary of the shadow.
div.box {
background: linear-gradient(90deg, hsl(26, 68%, 26%), hsl(26, 68%, 45%));
height: 100px;
width: 100px;
box-shadow: 0 0 0 12px hsl(26, 68%, 35%) inset;
border-radius: 10px;
}
<div class="box"></div>
Reference: How to create an inner shadow using CSS
Well, I edited your code. Here is the demo.
Basically, I added one more div and added some style. Hope it will give you an idea.
Also, I added a snippet down below:-
.box {
box-sizing: border-box;
border: solid 0.01rem #2e2e2e;
border-radius: 15px;
width: 100px;
height: 100px;
background: red;
padding: 10px 0px 10px 0px;
}
.inner-div {
box-sizing: border-box;
border-radius: 15px;
width: 78px;
height: 78px;
background: #ee1717;
margin: 0 auto;
}
<div class="box"/>
<div class="inner-div"></div>
<div>
I use linear-gradient on ::after to make a object like this, a disappeared border. now I want to use scale to make one of them such active (selected) but look like it ignore z-index: -1; and show all gradient. I want to display selected one like others.
.Winter-Plans {
width: calc(100%/5 - 16px);
min-height: 360px;
position: relative;
border-radius: 20px;
background: white;
padding: 80px 15px 35px 15px;
margin: 0 8px 20px 8px;
box-sizing: border-box;
float: left;
}
.Winter-Plans::after {
position: absolute;
top: -1px;
bottom: -1px;
left: -1px;
right: -1px;
background: linear-gradient(to top, #ddd, white);
content: '';
z-index: -1;
border-radius: 20px;
}
.Winter-Plans.Selected {
transform: scale(1.1);
}
<div class="Winter-Plans">
</div>
<div class="Winter-Plans Selected">
</div>
<div class="Winter-Plans">
</div>
There are lot of topics by this title, I tried but none of them solved my isssue. ps: I can't change html structure, for this reason I used ::after
transform will create a stacking context forcing the pseudo element to be painted inside an no more outside/behind your element. Related question to better understand the issue: Why can't an element with a z-index value cover its child?
Consider a different way to do the same effect by using multiple background where you don't need pseudo element
.Winter-Plans {
width: calc(100%/5 - 16px);
min-height: 360px;
border-radius: 20px;
background:
linear-gradient(white,white) padding-box, /* cover only the padding area*/
linear-gradient(to top, #ddd, white) border-box; /* cover the border area*/
border:1px solid transparent; /* a transparent border for our gradient */
padding: 80px 15px 35px 15px;
margin: 0 8px 20px 8px;
box-sizing: border-box;
float: left;
}
.Winter-Plans.Selected {
transform: scale(1.1);
}
<div class="Winter-Plans">
</div>
<div class="Winter-Plans Selected">
</div>
<div class="Winter-Plans">
</div>
In case you need a solution with a transparent background and a border gradient with radius check this: Border Gradient with Border Radius
Desired result:
A CSS solution where I have a container with width: 100%;, and above and below the container, I have triangles attached that create a parallelogram. The triangles should cover the entire width of the screen.
Problem
I tried with transform, but that also transforms the text inside the container, so that doesn't work to create the desired form. Right now I'm trying with 2 divs, 1 above and 1 under the container, and with border-right css property. The problem here is that it doesn't accept percentages.
Code
HTML:
<div class="triangleUP"></div>
<article class="blue">
Lorem ipsum (times 200)
</article>
<div class="triangleDOWN"></div>
CSS:
.triangleUP {
width: 0;
height: 0;
border-top: 250px solid transparent;
border-right: 1920px solid #344cd0;
overflow:hidden;
}
.blue{
background-color:#344cd0;
color:white;
}
.triangleDOWN{
width: 0;
height: 0;
border-top: 250px solid #344cd0;
border-right: 1920px solid transparent;
}
JSFiddle
I know that with jQuery I could easily manipulate the property, but I'd prefer to keep it CSS only.
A possible solution here would be to use 100vw which is 100% of the viewport width. Here is a table of current browser support.
New CSS:
.triangleUP {
width: 0;
height: 0;
border-top: 250px solid transparent;
border-right: 100vw solid #344cd0;
overflow:hidden;
}
.blue{
background-color:#344cd0;
color:white;
}
.triangleDOWN{
width: 0;
height: 0;
border-top: 250px solid #344cd0;
border-right: 100vw solid transparent;
}
Result:
If you want the triangle to be responsive but with a set width which is not 100% of the screen, you can use calc.
.bg{
background: #000;
width: 100%;
height: 100vh;
margin: 0;
}
.bg:after{
content: '';
width: 0;
display: block;
border-style: solid;
border-width: calc(100vh - 50px) calc(100vw - 50px) 0 0;
border-color: #fedbda transparent transparent transparent;
position: absolute;
top: 8px;
margin: 25px;
}
<div class="bg">
</div>
I'm trying to decrease the height of the triangle made using css to fill in the div "box"
here is the fiddle http://jsfiddle.net/6rp7F/
.triangle-down{
width: 50%;
height: 0;
padding-left: 50%;
padding-top: 50%;
overflow: hidden; }
.triangle-down div {
width: 0;
height: -600px;
margin-left:-500px;
margin-top:-500px;
border-left: 500px solid transparent;
border-right: 500px solid transparent;
border-top: 500px solid #039dd4;
}
here is what i'm expecting to achieve:
Maybe setting border-top to 200px will help you. If not the actual value, you at least see which parameter to tweak.
Updated fiddle (with change made):
http://jsfiddle.net/6rp7F/6/
.triangle-down{
width: 50%;
height: 0;
padding-left: 50%;
padding-top: 50%;
overflow: hidden; }
.triangle-down div {
width: 0;
height: -600px;
margin-left:-500px;
margin-top:-500px;
border-left: 1200px solid transparent;
border-right: 1200px solid transparent;
border-top: 500px solid #039dd4;
This goes off-screen but works!
If you are willing to reduce the overall sizes, then you can see it just as well in that tiny screen but the concept remains the same
See here working perfectly! (I reduced everything by a factor of 10 just to demonstrate that it works)
Changing the margin-top will decrease the height, but will also shrink the triangle. You have to also adjust margin-left, margin-right, padding-left, and padding-right to keep its width the same.
Here is an updated Fiddle
No sure why you need the extra div when this can be done with a pseudo element
JSfiddle Demo
HTML
<div class="triangle-down"></div>
CSS
.triangle-down{
height:1px;
position: relative;
}
.triangle-down:after {
position: absolute;
content:"";
width:0;
height:0;
/* separate out so you can see various properties*/
/* the height of the arrow is dtermined by the top and bottom border widths */
border-width: 200px 500px 200px 500px;
border-style:solid;
border-color:red transparent transparent transparent;
}
You can modify your CSS applied to the div as such:
.triangle-down div {
width: 0px;
margin-left: -300px;
margin-top: -350px;
border-left: 250px solid transparent;
border-right: 250px solid transparent;
border-top: 125px solid #039DD4;
}
You can see this: http://jsfiddle.net/zs6sY/
Hope this helps!!!
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>