I am trying to round in the bottom border of a div. Is it possible to do with css? I know you can round in corners with:
border-bottom-left-radius: 50px;
I guess I am trying to achieve the inverse of this.
Any help would greatly be appreciated.
Thanks
Sure it's "possible". Overlay divs.
http://jsfiddle.net/jprGx/3/
.outer {
width: 50px;
height: 50px;
position: relative;
border: #000 1px solid;
}
.inner {
position:absolute;
background: #fff;
height: 20px;
width: 50px;
bottom: -1px;
left: -1px;
border-left: #000 1px solid;
border-top: #000 1px solid;
border-right: #000 1px solid;
border-top-right-radius: 25px;
border-top-left-radius: 25px;
}
.round{
border-radius: 0px 0px -50px -50px;
}
A more simple and easier way to do this would to implicitly code by:
.round{
border-radius: 0px 0px 50px 50px;
}
Border-radius: 0px (top left corner) 0px (top right corner) 50px (bottom left corner) 50px (bottom right corner)
Related
How can I make this bottom div into a triangle like shown in the image? I tried the code below but the edges don't come into the center.
border-radius: 0 0px 100px 100px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 100px 100px 0 100px;
border-color: #007bff transparent transparent transparent;
Try this:
HTML
<div class="triangle">
<!--Div content here -->
</div>
CSS
.triangle {
width: 0px;
height: 0px;
border-style: solid;
border-width: 60px 175px 0 175px;
border-color: #007bff transparent transparent transparent;
}
See DEMO here:
TRIANGLE DOWN
http://jsfiddle.net/EdZ32/6/
TRIANGLE UP
http://jsfiddle.net/EdZ32/5/
Triangle Generator here:
http://html-generator.weebly.com/css-triangle-generator.html
use the CSS below to achieve the triangle styling.
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}
So I'm drawing elements in CSS, using this tutorial as a guide. I need some help with borders, though. For instance, here's my code for a curved trapezoid:
.foobar {
height: 0px;
width: 140px;
position: relative;
border-bottom: 200px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom-left-radius: 150px 70px;
border-bottom-right-radius: 100px 25px;
}
The problem: I want to draw a 1px line border around the foobar element, but I'm already using the border properties to draw the element in the first place.
Is there an easy way to do this? My sense is that I'll have to create a shadow element that is the same shape as -- but slightly larger than -- the foobar element.
Thanks in advance!
You can position a :pseudo element behind with slightly adjusted dimensions.
.foobar, .foobar:before {
height: 0px;
width: 140px;
position: relative;
border-bottom: 200px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom-left-radius: 150px 70px;
border-bottom-right-radius: 100px 25px;
}
.foobar:before {
content: "";
display:block;
position: absolute;
left: -31px;
top: -1px;
width: 142px;
z-index: -1;
border-bottom: 202px solid black;
/* add these lines if you're a pixel perfectionist */
border-bottom-left-radius: 150px 71px;
border-bottom-right-radius: 100px 26px;
}
http://jsfiddle.net/4vNGL/2
You can use a pseudo element drawn behind with same rules with a small increase of scale.
.foobar, .foobar:before {
height: 0px;
width: 140px;
position: relative;
border-bottom: 200px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom-left-radius: 150px 70px;
border-bottom-right-radius: 100px 25px;
position:relative;
}
.foobar:before {
content:'';
position:absolute;
display:block;
z-index:-1;
top:0;
left:-30px;
width: 140px;
-webkit-transform-origin:center;
-webkit-transform:scale(1.03);/* adapt here the width of your fake border */
transform-origin:center;
transform:scale(1.03);
border-bottom: 200px solid black; /* color of fake border */
}
http://codepen.io/gc-nomade/pen/eDIGJ
You can even play with both pseudo-element and still add some shadows: http://codepen.io/gc-nomade/pen/axmsc
I tried to create this canvas in css:
this is my jsfiddle:
http://jsfiddle.net/alonshmiel/kyfha/35/
I have a problem only with the circle border, it's not exactly like the canvas.
this is my css:
.PersonaCanvas {
width: 100px;
height: 100px;
border-top: 12px solid rgb(238,238,238);
border-left: 12px solid rgb(238,238,238);
border-right: 12px solid rgb(238,238,238);
-webkit-border-radius: 100px;
-khtml-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
overflow: hidden;
}
.PersonaCanvas img {
display: block;
margin-top:16px;
width:100%;
height:80%;
}
and my html:
<div class="PersonaCanvas">
<img src="http://s8.postimg.org/ij71l6xol/New_Pers_achiever_1.png"/>
</div>
any help appreciated!
Basically you set a width and height of the container to 100px, but when you add a border, it automatically grows in size; if you inspect, you have the final width which is 124px, which comes from the 100px you set, along with the 12px border-left and another 12px border-right. You would either have to manually change it to accommodate the size to add up to 100px, or you can use a css3 method of box-sizing: border-box to do the calculation for you. Also, we had to change the width of the img to 80%, since you want it to stay in proportion to its height within the container. Lastly, the size of the img is fixed, but we have to align its margin: 16px auto 0. Try this updated one:
.PersonaCanvas {
width: 100px;
height: 100px;
border-top: 12px solid rgb(238,238,238);
border-left: 12px solid rgb(238,238,238);
border-right: 12px solid rgb(238,238,238)
-webkit-border-radius: 100px;
-khtml-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
overflow: hidden;
box-sizing: border-box
}
.PersonaCanvas img {
display: block;
margin: 16px auto 0;
width: 80%;
height: 80%;
}
The issue with the width of the border decreasing is cause by the lack of a bottom border (which is assumed to be 0 pixels)
So by adding a transparent bottom border you can make the width consistent.. (but you will need extra elements to make the ends be curved)
border-bottom: 12px solid transparent;
http://jsfiddle.net/kyfha/39/
I added two other div's. One for a white circle to cover part of the solid bottom border. And I also added the css elements and made te absolute so they will still fit wherever you need them. The border ends are not perfect, but if you made a white image with the correct edhe you have and inseted it into the thrid div tag, you will be perfect.
I hope this helps :)
http://jsfiddle.net/kyfha/44/
<div class="PersonaCanvas">
<img src="http://s8.postimg.org/ij71l6xol/New_Pers_achiever_1.png"/>
</div>
<div class="PersonaCanvas2">
</div>
<div class="PersonaCanvas3">
</div>
Here is the CSS
I changed the size of the image slightly and moved it around a little to give you your image.
.PersonaCanvas {
width: 100px;
height: 100px;
border-top: 12px solid transparent;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 12px solid transparent;
overflow: hidden;
position: absolute;
z-index: 100;
}
.PersonaCanvas2 {
width: 100px;
height: 100px;
border-top: 12px solid rgb(238,238,238);
border-left: 12px solid rgb(238,238,238);
border-right: 12px solid rgb(238,238,238);
border-bottom: 12px solid rgb(238,238,238);
-webkit-border-radius: 100px;
-khtml-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
overflow: hidden;
position: absolute;
z-index: 1;
}
.PersonaCanvas3 {
position: absolute;
width: 50px;
height: 50px;
-webkit-border-radius: 50px;
-khtml-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
background: #FFF;
top: 110px;
left: 46px;
z-index: 10;
}
.PersonaCanvas img {
display: block;
margin-top:16px;
width:80px;
height:80px;
position: absolute;
left: 10px;
top: -0px;
}
Basicallly I have two instances of the div tag and the image is in one without the border or the radius.
How would you achieve an 10px high oval blurry shadow below a 200px box?
.box {
width:200px;
height:200px;
background: #c00;
position:relative;
}
.box:before {
content:'';
position: absolute;
bottom: -20px;
left:20px;
width: 210px;
height: 10px;
background: none; /*This cuts off some portion of the box shadow*/
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
-webkit-box-shadow: 0 15px 10px #000000;
-moz-box-shadow: 0 15px 10px #000000);
-0-box-shadow: 0 15px 10px #000000);
box-shadow: 0 15px 10px #000000;
}
http://jsbin.com/uqugob
The above code is almost perfect, except that I want a more thin oval blurry shadow, and remove the disturbing white background of :before.
Thanks, finally I got it as expected, almost, except that the left and right should be more blurry:
http://jsbin.com/uqugob/4
Thanks
removed the styles with vendor-prefixes (they were annoying, you can add them back using what i provided) but here's the shadow's code:
.box:before {
content:'';
position: absolute;
bottom: -50px;
left:20px;
width: 210px;
height: 30px;
background: #333;
border-radius: 200px / 30px;
box-shadow: 0 0 10px 10px #333;
}
I always like a challenge. Here's what I came up with: http://jsbin.com/uqugob/3/edit
Like #Joseph, I got rid of the vendor prefixes.
.box:before {
content:'';
position: absolute;
bottom: -10px;
left:20px;
width: 210px;
height: 8px;
background: transparent; /*Without a color, the box shadows fails*/
border-radius: 100px / 5px;
box-shadow: 0 25px 25px #000000;
}
I try to change the code for showing shadow after 'hover' event , doesn't work
try using:
margin:0 auto;
to make a shadow in the center and want to reduce the shadow from both left and right sides. Tried assigning it width less than the width of the div/box.
I want to make a CSS only speech bubble. So far, I have this...
Example
CSS
div {
position: relative;
background: #fff;
padding: 10px;
font-size: 12px;
text-align: center;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
div:after {
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: -60px;
margin-left: -15px;
border-width: 30px 20px 30px 20px;
border-style: solid;
border-color: #fff transparent transparent transparent;
}
jsFiddle.
...which is almost exactly what I want. However, I want a light border around the whole thing.
Obviously, on the main portion, that is simple as adding border: 1px solid #333 to the div.
However, as the tail of the bubble is a border hack, I can't user a border with it.
I tried setting a box shadow of 0 0 1px #333 but browsers apply the border to the rectangular shape of the element (which I guess is what they should do).
jsFiddle.
My next thoughts were finding a Unicode character that looks like a bubble tail and absolutely positioning it there, with text-shadow for the border and using z-index of the main bubble to hide the top shadow of the text.
What Unicode character would be suitable for this? Should I do something different? Do I need to resort to an image?
I only have to support Mobile Safari. :)
<div>Hello Stack Overflow!<span></span></div>
div span:after {
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: -51px;
margin-left: -15px;
border-width: 20px 20px 30px 20px;
border-style: solid;
border-color: #000 transparent transparent transparent;
}
http://jsfiddle.net/QYH5a/
For the Unicode character approach you suggested, the most appropriate would be ▼ U+25BC BLACK DOWN-POINTING TRIANGLE. I don't know whether iOS has glyphs for it.
Here is a similar solution:
http://jsfiddle.net/JyPBD/2/
<div>Hello Stack Overflow!<span></span></div>
body {
background: #ccc;
}
div {
position: relative;
background: #fff;
padding: 10px;
font-size: 12px;
text-align: center;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
border: 1px solid #333;
}
div:after {
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: -60px;
margin-left: -16px;
border-width: 30px 20px 30px 20px;
border-style: solid;
border-color: green transparent transparent transparent;
}
div span
{
border-color: #FF0000 transparent transparent;
border-style: solid;
border-width: 25px 15px;
bottom: -51px;
margin-left: -65px;
position: absolute;
z-index: 10;
}
You could use the filter property with box-shadow() to do it...
-webkit-filter: drop-shadow(1px 1px 1px #111) drop-shadow(-1px -1px 1px #111);
jsFiddle.