I have two overlapping divs that have css3 box shadows. The trouble is that even when I set the z-index I will still need to eliminate one of the div's box-shadow. I have seen cases where negative spreads and zero values are used but I don't think that would work here.
The code I have now is:
#bulb-top {
position: relative;
width: 280px;
height: 280px;
background-color: #E5F7A3;
-webkit-border-radius: 280px;
-moz-border-radius: 280px;
border-radius: 280px;
border: 8px solid #FFF40C;
top: -430px;
margin-left: auto;
margin-right: auto;
-webkit-box-shadow: 0px 0px 15px 1px #FFF40C;
-moz-box-shadow: 0px 0px 15px 1px #FFF40C;
box-shadow: 0px 0px 15px 1px #FFF40C;
z-index: 4;
}
#bulb-bottom {
position: relative;
width: 140px;
height: 120px;
background-color: #E5F7A3;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 30px;
-moz-border-radius-bottomleft: 30px;
-webkit-border-radius: 0px 0px 30px 30px;
border-radius: 0px 0px 30px 30px;
border-left: 8px solid #FFF40C;
border-right: 8px solid #FFF40C;
border-bottom: 8px solid #FFF40C;
top: -455px;
margin-left: auto;
margin-right: auto;
-webkit-box-shadow: 0px 0px 15px 1px #FFF40C;
-moz-box-shadow: 0px 0px 15px 1px #FFF40C;
box-shadow: 0px 0px 15px 1px #FFF40C;
z-index: 5;
}
http://jsfiddle.net/minitech/g42vq/3/
You can use the ::before pseudo-element to block out one side of the box shadow. It's not perfect, but it might be enough for your situation. Here's the updated jsFiddle.
#bulb-bottom:before {
background-color: #E5F7A3;
content: '';
display: block;
height: 30px;
margin: 0 auto;
position: relative;
top: -10px;
width: 140px;
}
Related
Good afternoon, tell me please. I made up a block with a protruding corner on top of the block. On the whole block I have a corner that I made using box-shadow. How can I make exactly such a frame for a pseudo-element (.comment_text:before)
.comment{
margin-top: 20px;
padding: 0px 20px 0px 20px;
}
.comment_text{
max-width: 680px;
background-color: #f1fbff;
padding: 10px;
margin-top: 15px;
color: #FFF;
position: relative;
font-size: 12px;
line-height: 20px;
-webkit-box-shadow: 0px 0px 0px 1.5px #cfcfcf;
-moz-box-shadow: 0px 0px 0px 1.5px #cfcfcf;
box-shadow: 0px 0px 0px 1.5px #cfcfcf;
color: #333333;
font-size: 12pt;
font-family: Arial, sans-serif;
}
.comment_text:before {
content: "";
display: block;
border-bottom: 15px solid #f2fbff;
border-right: 20px solid transparent;
border-left: 0px solid transparent;
position: absolute;
top: -15px;
left: 22px;
}
<div v-for='comment in comments' class="comment">
<div class="comment_text">Some Text</div>
</div>
You can create another psudo element (::after) and make it litter bigger. Add the color similar to your Div border.
.comment{
margin-top: 20px;
padding: 0px 20px 0px 20px;
}
.comment_text{
max-width: 680px;
background-color: #f1fbff;
padding: 10px;
margin-top: 15px;
color: #FFF;
position: relative;
font-size: 12px;
line-height: 20px;
-webkit-box-shadow: 0px 0px 0px 1.5px #cfcfcf;
-moz-box-shadow: 0px 0px 0px 1.5px #cfcfcf;
box-shadow: 0px 0px 0px 1.5px #cfcfcf;
color: #333333;
font-size: 12pt;
font-family: Arial, sans-serif;
}
.comment_text:before {
content: "";
display: block;
border-bottom: 15px solid #cfcfcf;
border-right: 20px solid transparent;
border-left: 0px solid transparent;
position: absolute;
top: -15px;
left: 22px;
}
.comment_text:after {
content: "";
display: block;
border-bottom: 18px solid #f2fbff;
border-right: 20px solid transparent;
border-left: 0px solid transparent;
position: absolute;
top: -12px;
left: 24px;
}
<div v-for='comment in comments' class="comment">
<div class="comment_text">{{ comment.text }}</div>
</div>
Try adding Height and Width to it. and play with it until you have the desired effect.
You can also add a background to define what color you want it in
.comment_text:before {
content: "";
display: block;
border-bottom: 15px solid #f2fbff;
border-right: 20px solid transparent;
border-left: 15px solid transparent;
position: absolute;
top: -15px;
left: 2px;
height: 1px;
width: 10px;
background: blue;
}
.comment{
margin-top: 20px;
padding: 0px 20px 0px 20px;
}
.comment_text{
max-width: 680px;
background-color: #f1fbff;
padding: 10px;
margin-top: 15px;
color: #FFF;
position: relative;
font-size: 12px;
line-height: 20px;
-webkit-box-shadow: 0px 0px 0px 1.5px #cfcfcf;
-moz-box-shadow: 0px 0px 0px 1.5px #cfcfcf;
box-shadow: 0px 0px 0px 1.5px #cfcfcf;
color: #333333;
font-size: 12pt;
font-family: Arial, sans-serif;
}
.comment_text:before {
content: "";
display: block;
border-bottom: 15px solid #f2fbff;
border-right: 20px solid transparent;
border-left: 0px solid transparent;
position: absolute;
top: -15px;
left: 22px;
box-shadow: -2px 0px 0px -0.5px #cfcfcf;
}
.comment_text:after {
content: "";
display: block;
width: 23px;
height: 0px;
top: -8px;
left: 20px;
box-shadow: 0px 0px 0px 1px #cfcfcf;
transform: rotate(35deg);
position: absolute;
}
It's been a couple hours already that I am struggling with my CSS.
I'm trying to add a box-shadow on an element of my website that is composed of 3 divs : #top #content and #bot.
Here is a picture to help you visualize what I deal with :
Having the box-shadow on the left and right of the div #content was kind of the easy part, but I'm really struggling for the top and bottom part. I can't make anything that looks decently clean.
Here is my code :
body {
margin-top: 30px;
}
div#content {
padding: 20px 30px 20px 30px;
color: #515348;
font-size: 76%;
line-height: 1.6em;
height: 100px;
background: #FFF;
width: 240px;
margin-right: auto;
margin-left: auto;
border-left: 1px solid grey;
border-right: 1px solid grey;
box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 8px 0 14px -4px rgba(33, 33, 33, 0.6), -8px 0 14px -4px rgba(33, 33, 33, 0.5);
}
#top {
background: #FFF;
height: 10px;
width: 300px;
margin: 0 auto;
position: relative;
-webkit-border-radius: 8px 8px 0px 0px;
-moz-border-radius: 8px 8px 0px 0px;
border-radius: 8px 8px 0px 0px;
behavior: url(/PIE.htc);
border-top: 1px solid grey;
border-left: 1px solid grey;
border-right: 1px solid grey;
box-shadow: 0 9px 0px 0px white, -8px 0 14px -4px rgba(33, 33, 33, 0.5), 8px 0 14px -4px rgba(33, 33, 33, 0.6), -8px 0 14px -4px rgba(33, 33, 33, 0.5);
}
#bot {
background: #FFF;
height: 10px;
width: 300px;
margin: 0 auto;
position: relative;
-webkit-border-radius: 0px 0px 8px 8px;
-moz-border-radius: 0px 0px 8px 8px;
border-radius: 0px 0px 8px 8px;
behavior: url(/PIE.htc);
border-bottom: 1px solid grey;
border-left: 1px solid grey;
border-right: 1px solid grey;
box-shadow: 8px 4px 14px 4px rgba(33, 33, 33, 0.5), 0 9px 0px 0px white, 8px 0 14px -4px rgba(33, 33, 33, 0.6), -8px 0 14px -4px rgba(33, 33, 33, 0.5);
}
<div id="top"></div>
<div id="content"></div>
<div id="bot"></div>
Any idea about making this thing a bit "cleaner" ?
Quick Edit: The box-shadow on the bot part actually didn't look that bad on my screen, i had found some better settings that I since lost by trying different configurations.
Shadow all around the shape:
The image provided in question (when seen along with the snippet) is a bit confusing on whether you are looking for a shadow on only the sides (or) for the entire shape as a whole.
If you are looking to add a shadow to the entire shape then one option is to add one pseudo-element to the container element such that it is equal to the height of the container + the top + the bottom element. This pseudo-element should also be given border-radius and be positioned above the container by the same no. of pixels as the height of the top element (inversed). Adding the required box-shadow to this pseudo-element will produce the expected output.
body {
margin-top: 30px;
}
div#content {
position: relative;
height: 100px;
width: 240px;
padding: 20px 30px 20px 30px;
margin-right: auto;
margin-left: auto;
color: #515348;
font-size: 76%;
line-height: 1.6em;
background: #FFF;
border-left: 1px solid grey;
border-right: 1px solid grey;
}
div#content:before {
position: absolute;
content: '';
left: 0px;
top: -10px; /* positioning above makes shadow extend above */
height: calc(100% + 20px); /* to offset for top and bottom */
width: 100%;
border-radius: 8px;
z-index: -1; /* to send the elements and their shadow behind */
box-shadow: 6px 0px 6px 0px rgba(33, 33, 33, 0.25), -6px 0px 6px 0px rgba(33, 33, 33, 0.25), 0px 6px 6px 0px rgba(33, 33, 33, 0.25), 0px -6px 6px 0px rgba(33, 33, 33, 0.25);
}
#top {
position: relative;
height: 10px;
width: 300px;
margin: 0 auto;
background: #0F0;
border-radius: 8px 8px 0px 0px;
border: 1px solid grey;
border-width: 1px 1px 0px 1px;
}
#bot {
position: relative;
height: 10px;
width: 300px;
margin: 0 auto;
background: #00F;
border-radius: 0px 0px 8px 8px;
border: 1px solid grey;
border-width: 0px 1px 1px 1px;
}
<div id="top"></div>
<div id="content"></div>
<div id="bot"></div>
Shadow all around shape but fades towards top and bottom:
In this approach the shadow is applied all around the shape but it gradually fades towards the top and bottom. These are all the possible variants based on description, image in question and snippet. You can choose the one which suits you best.
body {
margin-top: 30px;
}
div#content {
position: relative;
height: 100px;
width: 240px;
padding: 20px 30px 20px 30px;
margin-right: auto;
margin-left: auto;
color: #515348;
font-size: 76%;
line-height: 1.6em;
background: #FFF;
border-left: 1px solid grey;
border-right: 1px solid grey;
}
div#content:before {
position: absolute;
content: '';
left: 0px;
top: -8px; /* positioning above makes shadow extend above */
height: calc(100% + 16px); /* to offset for top and bottom */
width: 100%;
border-radius: 8px;
z-index: -1; /* to send the elements and their shadow behind */
box-shadow: 6px 0px 6px 0px rgba(33, 33, 33, 0.25), -6px 0px 6px 0px rgba(33, 33, 33, 0.25), 0px 0px 6px 0px rgba(33, 33, 33, 0.25), 0px 0px 6px 0px rgba(33, 33, 33, 0.25);
}
#top {
position: relative;
height: 10px;
width: 300px;
margin: 0 auto;
background: #0F0;
border-radius: 8px 8px 0px 0px;
border: 1px solid grey;
border-width: 1px 1px 0px 1px;
}
#bot {
position: relative;
height: 10px;
width: 300px;
margin: 0 auto;
background: #00F;
border-radius: 0px 0px 8px 8px;
border: 1px solid grey;
border-width: 0px 1px 1px 1px;
}
<div id="top"></div>
<div id="content"></div>
<div id="bot"></div>
Shadow only on sides:
Looking closely at the original image provided in the question, one thing that I can see is that you don't actually need a box-shadow on the top and bottom elements. You just need shadow on the container which extends a little above and below it. This can be achieved in a very hacky way by using just the container element alone but that's just way too complex and ugly.
So, the alternate option is to add one pseudo-element to the container element and position it a little bit above the container. Once box-shadow is added to this pseudo-element, the expected appearance will be achieved.
Note: In the below snippet, I've added a red colored shadow and also colored the top and bottom div just to illustrate how the shadow extend above and below the #content. I've also removed extra properties which are no longer required and shortened a few others.
I would also strongly recommend converting the three div into one as it would make the entire thing a lot more simpler.
body {
margin-top: 30px;
}
div#content {
position: relative;
height: 100px;
width: 240px;
padding: 20px 30px 20px 30px;
margin-right: auto;
margin-left: auto;
color: #515348;
font-size: 76%;
line-height: 1.6em;
background: #FFF;
border-left: 1px solid grey;
border-right: 1px solid grey;
}
div#content:before {
position: absolute;
content: '';
left: -1px;
top: -7px; /* positioning above makes shadow extend above */
height: calc(100% + 14px); /* to cover top and bottom */
width: 100%;
z-index: -1; /* to send the elements and their shadow behind */
box-shadow: 6px 0px 12px -6px rgba(255, 0, 0, 0.75), -6px 0px 12px -6px rgba(255, 0, 0, 0.75);
}
#top {
position: relative;
height: 10px;
width: 300px;
margin: 0 auto;
background: #0F0;
border-radius: 8px 8px 0px 0px;
border: 1px solid grey;
border-width: 1px 1px 0px 1px;
}
#bot {
position: relative;
height: 10px;
width: 300px;
margin: 0 auto;
background: #00F;
border-radius: 0px 0px 8px 8px;
border: 1px solid grey;
border-width: 0px 1px 1px 1px;
}
<div id="top"></div>
<div id="content"></div>
<div id="bot"></div>
Whats the point of having three divs instead of one?
box {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
width: 300px;
height: 120px;
background: #FFF;
border: 1px solid grey:
}
and then apply box shadow on selector as you wanted
I have a square div with rounded corners. Inside this div, I need to make this shape:
I want to do it with pure css, but there are two problems:
Little 1px green artifacts I can't get rid off (you can see them on the bottom and right sides)
I need a 1px red border around #login_form to also appear on top of my oval shapes.
Maybe there is a better way to cut the ovals.
Here is a jsfiddle of the below:
#login_form {
margin-left: auto;
margin-right: auto;
position: relative;
width: 200px;
height: 200px;
background: red;
border: 1px solid black;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
#white_ovale {
position: absolute;
right: -10px;
bottom: -10px;
width: 125px;
height: 80px;
background: white;
-webkit-border-radius: 225px 0px 7px 0px / 150px 0px 7px 0px;
-moz-border-radius: 225px 0px 7px 0px / 150px 0px 7px 0px;
border-radius: 225px 0px 7px 0px / 150px 0px 7px 0px;
}
#green_ovale {
position: absolute;
right: -21px;
bottom: -21px;
width: 139px;
height: 75px;
border: 0px;
background: #72B038;
-webkit-border-radius: 225px 20px 7px 0px / 130px 0px 7px 0px;
-moz-border-radius: 225px 20px 7px 0px / 130px 0px 7px 0px;
border-radius: 225px 20px 7px 0px / 130px 0px 7px 0px;
-webkit-box-shadow: inset -10px -10px 0px 10px white;
-moz-box-shadow: inset -10px -10px 0px 10px white;
box-shadow: inset -10px -10px 0px 10px white;
}
<div id="login_form">
<div id="white_ovale"></div>
<div id="green_ovale"></div>
</div>
you need overflow: hidden
you need a 3rd inner div which adds the border (Just think of an independent border that stacks i top of the others)
BTW: Don't id everthing. Use classes. Use id only if you need to. And try not the nest ids.
As a rule of thumb I use only class for CSS and idfor JS only
http://jsfiddle.net/Lt4x3ufg/1/
.login_form {
margin-left:auto;
margin-right:auto;
position: relative;
width: 200px;
height: 200px;
background: red;
border:1px solid red;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
overflow: hidden;
}
.login_form .border {
position: absolute;
top: -1px;
right: -1px;
bottom: -1px;
left: -1px;
border: 1px solid red;
border-radius: 10px;
}
.login_form .white_ovale {
position: absolute;
right: -10px;
bottom: -10px;
width: 125px;
height: 80px;
background: white;
-webkit-border-radius:
225px 0px 7px 0px / 150px 0px 7px 0px;
-moz-border-radius:
225px 0px 7px 0px / 150px 0px 7px 0px;
border-radius:
225px 0px 7px 0px / 150px 0px 7px 0px;
}
.login_form .green_ovale {
position: absolute;
right: -21px;
bottom: -21px;
width: 139px;
height: 75px;
border: 0px;
background: #72B038;
-webkit-border-radius: 225px 20px 7px 0px / 130px 0px 7px 0px;
-moz-border-radius: 225px 20px 7px 0px / 130px 0px 7px 0px;
border-radius: 225px 20px 7px 0px / 130px 0px 7px 0px;
-webkit-box-shadow: inset -10px -10px 0px 10px white;
-moz-box-shadow: inset -10px -10px 0px 10px white;
box-shadow: inset -10px -10px 0px 10px white;
}
<div class="login_form">
<div class="white_ovale"></div>
<div class="green_ovale"></div>
<div class="border"></div>
</div>
Single element solution
There is no need for extra markup. We can create:
the two shapes inside the div with ::before and ::after
the red border with the containing div itself
The excess background is cut off with overflow: hidden
Nice Advantage: Because IE 8 does not support the border-radius property, and will render an ugly square, we can use the double colon (::) for the pseudo elements. IE 8 does not recognise this syntax and will render just the red box. This is the modern syntax and valid CSS.
Note: For child elements to overlap the green shape, they should be given position: relative and z-index: 1
Browser Compatibility: Due to the border-radius property, IE 9 +. It is unlikely that you need the browser prefixes for the border-radius property.
Complete Example
I have condensed the CSS as much as possible.
.login_form {
margin: auto;
position: relative;
width: 200px;
height: 200px;
background: red;
border-radius: 10px;
overflow: hidden;
border: 1px solid red;
}
.login_form::before,
.login_form::after {
content: '';
display: block;
position: absolute;
right: -10px;
bottom: -10px;
width: 125px;
height: 80px;
background: white;
border-radius: 225px 0px 7px 0px / 150px 0px 7px 0px;
}
.login_form::after {
right: -31px;
bottom: -21px;
width: 149px;
height: 75px;
background: #72B038;
border-radius: 225px 20px 7px 0px / 130px 0px 7px 0px;
}
<div class="login_form"></div>
I have a fiddle that I created here that explains what I am trying to do exactly: Fiddle
Basically, I need to have text inside of the cloud and adjust the outside borders (that are using box-shadow effects) according to what is in the inside. Figured this is possible with just CSS, but perhaps it is not?
Can anyone provide an example or start for doing this?
Here is the code:
HTML:
<div class="container">
<div class="cloud1"></div>
<div class="cloud2"></div>
<div class="cloud3"></div>
<div class="cloud4"></div>
<div class="cloud5"></div>
<div class="cloud6"></div>
<div class="cloud7"></div>
<div class="cloud8"></div>
<div class="inner">This is a CSS Cloud and is looking super cool, but need to figure out how to adjust the outside borders of the cloud so that they wrap around this text no matter how much text is in here.</div>
</div>
CSS:
.container {
display: inline-block;
position: relative;
width: 250px;
min-height: 250px;
left: 100px;
top: 10px;
margin-bottom: -20px;
}
.cloud1 {
position: absolute;
left: 20px;
top: 15px;
height:45px;
width:90px;
background: whitesmoke;
border-radius: 90px 90px 0 0;
-moz-border-radius: 90px 90px 0 0;
-webkit-border-radius: 90px 90px 0 0;
box-shadow: inset 0px 0px 16px -4px white, 0px -1px 2px -2px black;
border-bottom: none;
z-index: 9;
}
.cloud2 {
position: absolute;
left: 80px;
top: 15px;
height: 45px;
width:80px;
background: whitesmoke;
border-radius: 80px 80px 0 0;
-moz-border-radius: 80px 80px 0 0;
-webkit-border-radius: 80px 80px 0 0;
box-shadow: inset 0px 2px 16px -4px white, 0px -1px 2px -1px black;
z-index: 6;
}
.cloud3 {
position: absolute;
left: 140px;
top: 45px;
height:90px;
width:45px;
border-radius: 0 90px 90px 0;
-moz-border-radius: 0 90px 90px 0;
-webkit-border-radius: 0 90px 90px 0;
background: whitesmoke;
box-shadow: inset 0px 0px 16px -4px white, 2px 0 4px -3px black;
z-index: 7;
}
.cloud4 {
position: absolute;
left: 140px;
top: 120px;
height:60px;
width:30px;
border-radius: 0 60px 60px 0;
-moz-border-radius: 0 60px 60px 0;
-webkit-border-radius: 0 60px 60px 0;
background: whitesmoke;
box-shadow: inset 0px 0px 16px -4px white, 1px 0 4px -2px black;
z-index: 8;
}
.cloud5 {
position: absolute;
left:55px;
top: 165px;
height:45px;
width:90px;
border-radius: 0 0 90px 90px;
-moz-border-radius: 0 0 90px 90px;
-webkit-border-radius: 0 0 90px 90px;
background: whitesmoke;
box-shadow: inset 0px 2px 16px -4px white, 0px 1px 2px -2px black;
z-index: 8;
}
.cloud6 {
position: absolute;
left:0px;
top: 165px;
height:30px;
width:60px;
border-radius: 0 0 60px 60px;
-moz-border-radius: 0 0 60px 60px;
-webkit-border-radius: 0 0 60px 60px;
background: whitesmoke;
box-shadow: inset 0px 2px 16px -4px white, 0px 2px 2px -2px black;
z-index: 7;
}
.cloud7 {
position: absolute;
left: -30px;
top: 80px;
height:90px;
width:45px;
border-radius: 90px 0 0 90px;
-moz-border-radius: 90px 0 0 90px;
-webkit-border-radius: 90px 0 0 90px;
box-shadow: inset 0px 0px 16px -4px white, -1px 0 4px -2px black;
background: whitesmoke;
z-index: 8;
}
.cloud8 {
position: absolute;
left: -15px;
top: 35px;
height:60px;
width:45px;
border-radius: 60px 0 0 60px;
-moz-border-radius: 60px 0 0 60px;
-webkit-border-radius: 60px 0 0 60px;
box-shadow: inset 0px 0px 16px -4px white, -1px 0 4px -2px black;
background: whitesmoke;
z-index: 7;
}
.inner {
position: absolute;
width: 135px;
height: 90px;
left: 5px;
top: 60px;
background: whitesmoke;
z-index: 10;
padding: 10px;
}
So thinking if I put a min-height on the elements instead of using height that this would do the trick, but it doesn't :(
First remove all absolute positioning. (as I mentioned in the comments)
Next place the whitesmoke background on the title element instead of it's parent element (which has padding) and you get a pretty good result.
.title {
position: relative;
text-align: center;
background: whitesmoke; /* here */
}
You can experiment with adding pseudo elements around the title to add circles around the top-left and bottom right areas of the text.
.title:before {
content: '';
display:inline-block;
width: 100%;
height: 50%;
position: absolute;
left: -40px;
z-index: -1;
box-shadow: inset 0px 0px 16px -4px white, -1px 0 4px -2px black;
border-radius: 100%;
background: whitesmoke;
top:0;
}
.title:after {
content: '';
display:inline-block;
width: 100%;
height: 50%;
position: absolute;
right: -40px;
z-index: -1;
box-shadow: inset 0px 0px 16px -4px white, 1px 0 4px -2px black;
border-radius: 100%;
background: whitesmoke;
bottom:0;
}
Updated FIDDLE (I updated the fiddle you posted in the comments)
Please Check the Fiddle
CSS
.container {
display: inline-block;
position: relative;
width: 250px;
min-height: 250px;
left: 100px;
top: 10px;
margin-bottom: -20px;
}
.cloud1 {
position: absolute;
left: 20px;
top: 15px;
height:45px;
width:90px;
background: whitesmoke;
border-radius: 90px 90px 0 0;
-moz-border-radius: 90px 90px 0 0;
-webkit-border-radius: 90px 90px 0 0;
box-shadow: inset 0px 0px 16px -4px white, 0px -1px 2px -2px black;
border-bottom: none;
z-index: 9;
}
.cloud2 {
position: absolute;
left: 80px;
top: 15px;
height: 45px;
width:110px;
background: whitesmoke;
border-radius: 80px 80px 0 0;
-moz-border-radius: 80px 80px 0 0;
-webkit-border-radius: 80px 80px 0 0;
box-shadow: inset 0px 2px 16px -4px white, 0px -1px 2px -1px black;
z-index: 6;
}
.cloud3 {
position: absolute;
left: 150px;
top: 45px;
height:90px;
width:45px;
border-radius: 0 90px 90px 0;
-moz-border-radius: 0 90px 90px 0;
-webkit-border-radius: 0 90px 90px 0;
background: whitesmoke;
box-shadow: inset 0px 0px 16px -4px white, 2px 0 4px -3px black;
z-index: 7;
}
.cloud4 {
position: absolute;
left: 140px;
top: 120px;
height:90px;
width:30px;
border-radius: 0 60px 60px 0;
-moz-border-radius: 0 60px 60px 0;
-webkit-border-radius: 0 60px 60px 0;
background: whitesmoke;
box-shadow: inset 0px 0px 16px -4px white, 1px 0 4px -2px black;
z-index: 8;
}
.cloud5 {
position: absolute;
left:55px;
top: 165px;
height:45px;
width:90px;
border-radius: 0 0 90px 90px;
-moz-border-radius: 0 0 90px 90px;
-webkit-border-radius: 0 0 90px 90px;
background: whitesmoke;
box-shadow: inset 0px 2px 16px -4px white, 0px 1px 2px -2px black;
z-index: 8;
}
.cloud6 {
position: absolute;
left:0px;
top: 170px;
height:30px;
width:60px;
border-radius: 0 0 60px 60px;
-moz-border-radius: 0 0 60px 60px;
-webkit-border-radius: 0 0 60px 60px;
background: whitesmoke;
box-shadow: inset 0px 2px 16px -4px white, 0px 2px 2px -2px black;
z-index: 7;
}
.cloud7 {
position: absolute;
left: -30px;
top: 80px;
height:90px;
width:45px;
border-radius: 90px 0 0 90px;
-moz-border-radius: 90px 0 0 90px;
-webkit-border-radius: 90px 0 0 90px;
box-shadow: inset 0px 0px 16px -4px white, -1px 0 4px -2px black;
background: whitesmoke;
z-index: 8;
}
.cloud8 {
position: absolute;
left: -15px;
top: 35px;
height:80px;
width:45px;
border-radius: 60px 0 0 60px;
-moz-border-radius: 60px 0 0 60px;
-webkit-border-radius: 60px 0 0 60px;
box-shadow: inset 0px 0px 16px -4px white, -1px 0 4px -2px black;
background: whitesmoke;
z-index: 7;
}
.inner {
position: absolute;
width: 150px;
height: 70px;
vertical-align:middle;
left: 5px;
top: 40px;
background: whitesmoke;
z-index: 10;
padding: 5px;
}
I have tried and did my best.
I've tried to create a button like this in CSS and the pointy part of the button not as pointy?
Here is CSS:
.home_icon { width: 40px; height: 25px; margin-left:10px; margin-top:8px; background: #FFCC05 url(../images/home_icon.svg) no-repeat 12px 4px; -webkit-border-radius: 11px 5px 5px 11px/17px 5px 5px 17px; -moz-border-radius: 11px 5px 5px 11px/17px 5px 5px 17px; border-radius: 11px 5px 5px 11px/17px 5px 5px 17px;}
Can anyone have a solution? I'm prepared to change the css code as long I've 'Equilateral' triangle of the pointy (on left) of a button?
(source: kerrydeaf.com)
UPDATE:
Here is my jsfiddle: http://jsfiddle.net/alma/eBtY4/1/
Can you try something like this
.home_icon
{
width: 120px;
height: 80px;
background:red;
position: relative;
-moz-border-radius:0 10px 10px 0;
-webkit-border-radius:0 10px 10px 0;
border-radius:0 10px 10px 0;
}
.home_icon:before
{
content:"";
position:absolute;
right: 100%;
width: 0;
height: 0;
border-top: 40px solid transparent;
border-right: 26px solid red;
border-bottom: 40px solid transparent;
}