This question already has answers here:
Half circle with CSS (border, outline only)
(6 answers)
Closed 4 years ago.
Can you provide me a suggestion on how to cut this circle into half? Also float them on between left and right.
.hello {
background-color: red;
width: 200px;
height: 180px;
border: transparent;
border-radius: 50%;
opacity: 0.50;
}
<div class="hello"></div>
This can be done purely on CSS making use of borders. Keep note that height has to be half of the width to give the half circle.
border-top-left or right-radius is the thing that adds the curve. So adding that extra +10 to it makes up for the space the border(which is set to 10px) creates. That way you get a perfect semi circle.
Try this:
#hello {
width: 200px;
height: 100px;
background-color: red;
border-top-left-radius: 110px;
border-top-right-radius: 110px;
border: 10px solid red;
border-bottom: 0;
float: right; /* Change this to left to float it to left */
}
<div id="hello"></div>
I have made it float right. Just change the value to left to change to float: left;
Hope this helps!
you should first make 2x1 Rectangle, then with border-radius make it round, but in just to side. see below code:
.half-circle {
width: 200px;
height: 100px;
border-radius: 100px 100px 0 0;
border: 1px solid red;
}
To make an awesome CSS shapes you can see this cheatsheet page.
Related
This question already has answers here:
Border-radius in percentage (%) and pixels (px) or em
(3 answers)
Closed 1 year ago.
I want to style a button and make it look like this:
I tried the code below, but it looks totally different.
button {
width: 500px;
height: 30px;
border-radius: 50%;
background-color: #f0f0f0;
}
I am interested in the border radius.
I suggest you to use something like this:
button {
width: 500px;
height: 30px;
border-radius: 15px; /* here we just change the radius to a fixed one, according to fixed height */
border: none; /* here we remove black border */
background-color: #f0f0f0;
}
For text, you can use text formating.
You have border-radius wrong. With your border-radius : 50%, will try to make the button oval kind of shape. So use px units to make rounded corners. Also there is default border on the button, so you have to set border to none. Below css would do the same thing :
button {
width: 500px;
height: 30px;
border-radius: 10px;
background-color: #f0f0f0;
border: none;
cursor: pointer;
font-family: monospace;
}
Set border-radius to px instead of %. Half of the height (30px) will make it nice and round. Anything less will make it less rounded.
button {
width: 500px;
height: 30px;
border-radius: 15px;
background-color: #f0f0f0;
}
button {
width: 500px;
height: 30px;
border-radius: 15px;
border: none;
background-color: #f0f0f0;
}
<button>text here</button>
Quick and simple question,
is there a quick way to change on a button, the distance from the borders edge to the "real" edge of the element.
I dont want to get the border further away, i want that the background is spread 1 or 2 px more over the edge of the border.
Google does not show me the right solution or I'm searching with wrong terms, hope some of you can help me.
Since my question is not clear, here is an picture of what try to achieve
https://picload.org/view/rpogroor/test.png.html
What you need to use over here is the pseudo element. The trick is to have a normal button but not to use a border on that. Insted, use an :after pseudo element and using CSS positioning, we can simulate the effect you want, that is, the background spreads beyond the dashed border.
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
button {
-webkit-appearance: none;
background: #ede032;
padding: 10px 20px;
border-radius: 20px;
border: 0;
position: relative;
margin: 40px;
}
button:after {
content: "";
position: absolute;
top: 3px;
right: 3px;
left: 3px;
bottom: 3px;
border: 1px dashed #515151;
border-radius: 20px;
}
<button>Hello There</button>
Here, the code is pretty self explanatory. I am having a simple button, where am setting some basic styles like background, border-radius and so on. Later, am having an :after pseudo where I use the dashed border which then I overlay over the button using CSS Positioning.
Your question is un-clear. What do you mean by
from an borders edge to the "real" edge of the element.
Are you trying to not display the border? If that's the case then you can always set the border to have a transparent color which would not show the border.
You can add padding to the button to increase space between its contents and the edge of the button.
Is this what you want?
padding:5px 10px ;
This means that the : Top and bottom padding are 5px.
Right and left padding are 10px.
By default a button has padding : 1px 6px; So to increase it by 1 or 2 pixels, just use appropriate values.
.spaced-out {
padding: 5px 10px;
}
<button>Hello</button>
<br><br>
<button class="spaced-out">Hello</button>
You want box-sizing:border-box.
This will ensure that, no matter the border-width, the element will be the same size. I assume this is what you want although the question is not very clear what you're looking for.
Notice the difference between the boxes with borders:
.flex-cont {
display: flex;
width: 100%;
height: 300px;
align-items: center;
justify-content: center;
}
.flex-item {
margin: 10px;
height: 200px;
background: blue;
flex: 1;
border: solid 20px green;
}
span {
display: block;
position: relative;
top: 45%;
text-align: center;
width: 100%;
}
.one {
box-sizing: content-box;
}
.two {
border: none;
}
.three {
box-sizing: border-box;
}
<div class="flex-cont">
<div class="flex-item one"><span>box-sizing: content-box</span></div>
<div class="flex-item two"><span>No border</span></div>
<div class="flex-item three"><span>box-sizing: border-box</span></div>
</div>
Here is a new JS fiddle based on your edit.
New JS Fiddle
This question already has answers here:
Shape with a slanted side (responsive)
(3 answers)
Closed 6 years ago.
I'm trying to "cut" a div diagonally after some space. It's very difficult to explain. It should look like this:
As you cann see, there is a blue parent div in the back with a white child div inside. The white div will be the same width as the parent div, but it will be "cutted" diagonally after some pixels (e.g. after 100px). I never did something like this, but I thought it could maybe done in CSS3 using transition or rotation or something like this (I don't know, I'm not familiar with CSS3).
I searched for diagonal divs but I only got results like this. Unfortunately I know nothing to do with it. Is this even possible? Can you please give me some hints?
Use border colors to display a diagonally cut div.
Combine it with ::after to use only one div.
.background {
background-color: #5555AA;
padding-top: 15px;
}
.content {
position: relative;
background-color: white;
height: 30px;
line-height: 30px;
padding: 0 100px 0 200px;
display:inline-block;
}
.content::after {
position: absolute;
right: -50px;
content: "";
border-bottom: 25px solid white;
border-left: 25px solid white;
border-top: 25px solid transparent;
border-right: 25px solid transparent;
}
<div class="background">
<div class="content">KONTAKT</div>
</div>
Here is a screen for the question above http://prntscr.com/66o7rf .
When I use border-radius in parent div and overlap another background with same value of border-radius, there appears a small space ( in screen, white space appears ).
I tried using background in :before and :after , but i don't think is a good way to do it.
Can anybody help with this?
body{
background: grey;
}
div {
width: 200px;
height: 200px;
background: #000;
border-radius: 10px;
padding-top: 160px;
overflow: hidden;
}
.footer {
width: 200px;
height: 40px;
background: #f00;
}
<div>
<div class="footer"></div>
</div>
When you use border-radius in parent div, dont set overflow: hidden to it. And for overlapping div or child div of it add border-radius to it but 2px less than parent div.
Example:
div{
background: #fff;
border-radius: 10px;
}
.child{
background: blue;
border-radius: 8px;
}
I am sure that this question is already answered, but I find it hard to search for it.
I have the following html:
<div id='outerBox'>
<div id='leftBox'><div id='secondLevelBox'></div></div>
<div id='rightBox'></div>
</div>
and the following css:
#outerBox {
width: 300px;
height: 200px;
border: 1px solid black;
}
#leftBox {
height: 100%;
width: 55%;
background-color: blue;
float: left;
}
#rightBox {
height: 100%;
width: 45%;
background-color: yellow;
float: left;
}
#secondLevelBox {
height: 100%;
width: 100%;
}
(See http://jsfiddle.net/dsMdb/1/)
this displays ok. But if I now add a border: 1px solid red to one of the inner divs, they will grow 2 pixels and the layout will break: http://jsfiddle.net/dsMdb/5/
How can I wrokaround this? (solutions for IE >=8 and current FF are ok)
You can change the way the browser is supposed to calculate the offset for the border & layout.
Take a look at the Box Model properties in CSS3, this way you can define the offset etc.
The command you're looking for in CSS is box-sizing. By default this set to content-box, which adds the width, padding etc as different values on top of each other.
By setting it to border-box, you can force the browser to instead render the box with the specified width and height, and add the border and padding inside the box.
Should apply to your border as well normally.
Problem is that it adds a border on the outside of that inner div. Since your red border is 1px, then it adds total of 2px.
Quick way to fix this is to remove `2px` from the outer `div`s width.
#outerBox {
width: 298px;
height: 200px;
border: 1px solid black;
}
Also, I would like to add, that this fix is very browser compatible ;)
I would suggest to have pixel graduation in the width and accordingly give room for border, like
Since total width is 300 px,
#leftBox {
height: 100%;
width: 165px;
background-color: blue;
float: left;
}
#rightBox {
height: 100%;
width: 145px;
background-color: yellow;
float: left;
}
now reduce the width accordingly and this would work across browsers.