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;
}
Related
JSFiddle
HTML
<div class="Progress">
<div class="Step">
</div>
<div class="Tri-Fwd"></div>
</div>
CSS
.Progress .Step {
float:left;
width:140px;
height:40px;
-webkit-box-shadow: inset 0px 0px 5px 1px rgba(21,139,204,1);
-moz-box-shadow: inset 0px 0px 5px 1px rgba(21,139,204,1);
box-shadow: inset 0px 0px 5px 1px rgba(21,139,204,1);
border-top-left-radius:6px;
-moz-border-radius-topleft:6px;
-webkit-border-top-left-radius:6px;
border-bottom-left-radius:6px;
-moz-border-radius-bottomleft:6px;
-webkit-border-bottom-left-radius:6px;
}
.Progress .Tri-Fwd {
float:left;
border-top: 20px solid transparent;
border-left: 20px solid;
border-bottom: 20px solid transparent;
-webkit-box-shadow: inset 0px 0px 10px 2px rgba(21,139,204,1);
-moz-box-shadow: inset 0px 0px 10px 2px rgba(21,139,204,1);
box-shadow: inset 0px 0px 10px 2px rgba(21,139,204,1);
}
Reference Image
The Problem
I'm trying to make a CSS only only step-by-step progress however I am having problems with my inner box shadows.
ADVANCED
*{box-sizing: border-box; padding: 0; margin: 0}
menu{
background: linear-gradient(#fff, #ccc);
margin: 40px auto;
border: 1px solid orange;
border-radius: 4px;
max-width: 480px;
overflow: hidden;
box-shadow: inset 0px 0px 2px #333, 0 0 1px #333;
}
menu li{
position: relative;
list-style: none;
display: inline-block;
padding: 10px 30px 10px 20px;
font-size: 20px;
line-height: 20px;
margin: 0;
background: linear-gradient(#f6e6b4 0%, #ed9017 100%);
}
menu li:before, menu li:after{
content: '';
position: absolute;
}
menu li:before{
top: 5px;
width: 30px;
height: 30px;
transform: rotate(45deg);
right: -13px;
box-shadow: 2px -2px 1px 0px #BABABA;
background: linear-gradient(135deg, #f6e6b4, #ed9017);
}
menu li.active{color: white}
menu li:nth-child(1){z-index: 2}
menu li:nth-child(2){z-index: 1}
menu li:not(:nth-child(1)){margin-left: -4px; padding-left: 40px}
<menu>
<li>Stage 1</li>
<li class=active>Stage 2</li>
</menu>
THE BASIC
*{box-sizing: border-box; padding: 0; margin: 0}
menu{
background-color: #ccc;
margin: 40px auto;
border: 2px solid orange;
border-radius: 4px;
max-width: 480px;
overflow: hidden
}
menu li{
position: relative;
list-style: none;
display: inline-block;
padding: 10px 4px 10px 20px;
font-size: 20px;
line-height: 20px;
margin: 0;
box-shadow: -2px 0 0 orange;
background-color: orange
}
menu li:before, menu li:after{
content: '';
position: absolute;
top: -2px;
border-bottom: 22px solid transparent;
border-top: 22px solid transparent
}
menu li:before{
border-left: 20px solid #ccc;
left: 100%;
}
menu li:after{
border-left: 20px solid orange;
left: 98%;
}
menu li:nth-child(1){z-index: 2}
menu li:nth-child(2){z-index: 1}
<menu>
<li>Stage 1</li>
<li>Stage 2</li>
</menu>
I have seen other complex effects being done with just CSS like the stacked paper effect:
http://jsfiddle.net/thefrontender/LwW7g/
<div class="slide expandable-slide">Title</div>
<div class="slide">Title</div>
.slide {
float: left;
display: block;
position: relative;
background: #FFF;
height: 10em;
width: 10em;
padding: 1em;
border: solid 2px #000;
margin-right: 2em;
}
.expandable-slide {
margin: 2em 2em 0 2em;
box-shadow: -1em -1em #666,
-2em -2em #333;
}
My need is very similar except the 2 outer edges need to connect with the main frontal div:
Anyone know of any tricks that can make this possible?
If you're able to use CSS pseudo-elements:
.slide {
position: relative;
width: 200px; /* arbitrary, adjust to taste */
height: 500px; /* arbitrary, adjust to taste */
border: 2px solid #000;
border-right-width: 40px; /* this is the 'depth' of the 'sides' */
border-bottom-width: 40px;
}
.slide::before {
content: '';
position: absolute;
top: -2px; /* to cover the top of the border */
left: 100%;
border: 20px solid #fff;
border-bottom-color: transparent; /* allows the containing element's border to be seen */
border-left-color: transparent;
}
.slide::after {
content: '';
position: absolute;
top: 100%;
left: -2px;
border: 20px solid #fff;
border-top-color: transparent;
border-right-color: transparent;
}
JS Fiddle demo.
The above uses the following HTML:
<div class="slide">Title</div>
You could stack multiple box shadows to attain the effect you're after:
.slide {
height: 200px;
width: 100px;
padding: 1em;
border: solid 2px #000;
}
.expandable-slide {
margin: 10px 10px 0 10px;
box-shadow: 1px 1px #999,
2px 2px #999,
3px 3px #999,
4px 4px #999,
5px 5px #999,
6px 6px #999,
7px 7px #999,
8px 8px #999,
9px 9px #999,
10px 10px #999;
}
jsFiddle example
You could do it this way (not the most elegant but works like a charm):
.expandable-slide {
margin: 2em 2em 0 2em;
box-shadow: 0.05em 0.05em #555,
0.1em 0.1em #555,
0.15em 0.15em #555,
0.2em 0.2em #555,
0.25em 0.25em #555,
0.3em 0.3em #555,
0.35em 0.35em #555,
0.4em 0.4em #555,
0.45em 0.45em #555,
0.5em 0.5em #555
;
}
fiddle
.expandable-slide {
position: relative;
margin: 2em 2em 0 2em;
box-shadow: 20px 25px 0px 0px #333;
}
.expandable-slide:before {
position: absolute;
content: "";
color: #333;
background: #333;
width: 0px;
height: 0px;
border-right: 15px solid #333;
border-top: 10px solid #333;
border-bottom: 15px solid #fff; /*match background color*/
border-left: 10px solid #fff;/*match background color*/
top: 194px;
left: 0px;
}
.expandable-slide:after {
position: absolute;
content: "";
color: #333;
background: #333;
width: 0px;
height: 0px;
border-bottom: 15px solid #333;
border-left: 10px solid #333;
border-right: 10px solid #fff; /*match background color*/
border-top: 15px solid #fff;/*match background color*/
top: 0px;
left: 194px;
}
I have a little problem with CSS 3, namely I would create such an object with a single item.
Here's an image of what I want to achieve:
Here's what have I:
CSS:
body{
background:grey;
padding:10px;
}
#talkbubble {
margin:0 auto;
box-shadow: 3px 10px 7px #deefe5;
width: 590px;
height: 160px;
background: white;
position: relative;
border-radius:10px;
border-bottom-left-radius:0px;
}
#talkbubble:before {
box-shadow: 10px 10px 5px #deefe5;
content:"";
position: absolute;
background:white;
top: 100%;
width: 228px;
height: 62px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
#talkbubble:after{
content:"";
position: absolute;
top:100%;
left:228px;
border-top: 10px solid white;
border-right: 10px solid transparent;
background:white;
}
HTML:
<div id="talkbubble"></div>
And a jsFiddle demo
How do I round off the angle between the two parts?
Taken information from here you can get this:
body
{
background:grey;
padding:10px;
}
#talkbubble
{
margin:0 auto;
box-shadow: 3px 10px 7px #deefe5;
width: 590px;
height: 160px;
background: white;
position: relative;
border-radius:10px;
border-bottom-left-radius:0px;
}
#talkbubble:before
{
box-shadow: 10px 10px 5px #deefe5;
content:"";
position: absolute;
background:white;
top: 95%;
width: 228px;
height: 62px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
#talkbubble:after
{
content:"";
position: absolute;
top:100%;
left:228px;
background:-webkit-radial-gradient(100% 100%, circle, rgba(204, 0, 0, 0) 10px, white 10px);
width: 10px;
height: 10px;
}
http://jsfiddle.net/uCRMQ/2
//Just the background shadow doesn't work.
Now background shadow works for this (at this size).
Lg
warappa
Short answer: you can't.
What you've done there has successfully created a box :after the DIV element, but if you start to enter text into the DIV it will not "flow" into the bottom section.
To achieve what you're aiming for in CSS3 you would need at least 3 DIVs and transparency effects, and you still would have the problem with text overflowing.
worx like a charm:
http://jsfiddle.net/42DJh/7/
just replace with this:
#talkbubble:after{
content:"";
position: absolute;
top:100%;
left:228px;
border-top: 10px solid white;
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-left: 10px solid transparent;
border-top-left-radius:10px;
background:transparent;
box-shadow: -3px -3px 1px white;
}
I have a box with a triangle that intersects it and I'd like a similar triangle to be cut out from the box so there is a white gap between the two. As this is a little hard to explain I created a jsFiddle here that shows what I have already.
Here is a screenshot
HTML
<div id="alertdetails">
<h2>UH OH</h2>
Date: 05/11/2012 15:57:46
<br><br>
View
</div>
<div id="arrow-right"></div>
CSS
#alertdetails {
background-color: #F8F8F8;
border: 1px solid #CCCCCC;
border-radius: 5px 5px 5px 5px;
left: 25px;
padding: 20px;
position: absolute;
text-shadow: 0 1px #FFFFFF;
top: 15px;
}
#arrow-right {
position: absolute;
top: 45px;
left: 15px;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #303030;
}
You can do this without the extra DIV for the arrow by using a UTF-8 "right arrow" and the :before pseudo class. This will give you a little more control over the style of the arrow.
#alertdetails {
background-color: #F8F8F8;
border: 1px solid #CCCCCC;
border-radius: 5px 5px 5px 5px;
left: 25px;
padding: 20px;
position: relative;
margin-top:15px;
text-shadow: 0 1px #FFFFFF;
}
#alertdetails::before {
content:"\25b6";
position:absolute;
top:20px;
left:-20px;
font-size:60px;
color:#ffffff;
}
You just need to add a second triangle that is slightly bigger.
HTML
<div id="alertdetails">
<h2>UH OH</h2>
Date: 05/11/2012 15:57:46
<br><br>
View
</div>
<div id="arrow-white"></div>
<div id="arrow-right"></div>
CSS
#alertdetails {
background-color: #F8F8F8;
border: 1px solid #CCCCCC;
border-radius: 5px 5px 5px 5px;
left: 25px;
padding: 20px;
position: absolute;
text-shadow: 0 1px #FFFFFF;
top: 15px;
}
#arrow-right {
position: absolute;
top: 45px;
left: 15px;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #303030;
}
#arrow-white{
position: absolute;
top: 44px;
left: 15px;
width: 0;
height: 0;
border-top: 21px solid transparent;
border-bottom: 21px solid transparent;
border-left: 22px solid #ffffff;
}
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;
}