Triangle with box shadow and not equal width - css

I am looking to have a left arrow that is 40px by 20px with a box-shadow. I have tried
The single right border approach -- the dimensions work perfectly, but then there is a square box border:
.item {
...
&::before {
content: '';
border-bottom: 20px solid transparent;
border-right: 20px solid #fff;
border-top: 20px solid transparent;
box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.4);
height: 0;
left: -20px;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 0;
}
}
and the double border approach -- box shadow works great, but the dimensions are incorrect since it needs to be a perfect square for the triangle to work:
.item {
...
&::before {
border: 20px solid black;
border-color: transparent transparent #fff #fff;
transform-origin: 0 0;
transform: rotate(45deg);
box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.4);
}
}
Is it possible to achieve with CSS or do I just need to a use an SVG?


You can use filter: drop-shadow instead of box-shadow:
filter: drop-shadow(-3px 3px 3px rgba(0, 0, 0, 0.4));
ref: https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow

Related

How to Add Box Shadow Effect To Pseudo After Content

Can you please take a look at this demo and let me know how I can add Box-shadow to Pseudo After Content? as you can see I tried to add like
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
but it is not adding the shadow and instead creating a box
body {
padding: 50px;
background: #eee;
}
.hero {
position: relative;
background-color: #fff;
height: 320px !important;
width: 100% !important;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}
.hero:after {
content: '';
position: absolute;
top: 100%;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 0;
border-top: solid 40px #fff;
border-left: solid 40px transparent;
border-right: solid 40px transparent;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}
<div class="hero"></div>

I think This Code will help you.
I have added properties: transform-origin and box-sizing
For reference: transform-origin and box-sizing
body {
background-color: #888;
}
.hero {
position: relative;
margin: 3em;
padding: 1em;
box-sizing: border-box;
background: #bada55;
box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);
}
.hero::after {
content: "";
position: absolute;
width: 0;
height: 0;
margin-left: -0.5em;
bottom: -2em;
left: 50%;
box-sizing: border-box;
border: 1em solid black;
border-color: transparent transparent #bada55 #bada55;
transform-origin: 0 0;
transform: rotate(-45deg);
box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.4);
}
<div class="hero"></div>

Deleted all the shadows and added container with property filter: drop-shadow(0 5px 10px rgba(0, 0, 0, .2)); which creates shadow by shape.
body {
padding: 50px;
background: #eee;
}
.container {
filter: drop-shadow(0 5px 10px rgba(0, 0, 0, .2));
}
.hero {
position: relative;
background-color: #fff;
height: 320px !important;
width: 100% !important;
}
.hero:after {
content: '';
position: absolute;
top: 100%;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
filter: drop-shadow;
height: 0;
border-top: solid 40px #fff;
border-left: solid 40px transparent;
border-right: solid 40px transparent;
}
<div class="container">
<div class="hero"></div>
</div>

remove corner of boxes and add shadow

I want to create a box .
I want remove a part of my box that is at the right bottom of my box .
And i need to place a box shadow at the removed part like this cyan part:
*I don't want rounded corner .

Try it example. But as the guys said, first try it yourself then something yourself before just asking us to do it.
.box{
position:relative;
width:300px;
height:300px;
background: #2B5891;
}
.box:before {
content: '';
position: absolute;
bottom: 0; right: 0;
border-bottom: 80px solid rgba(255, 255, 255, 0.94);
-webkit-box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75);
box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5);
border-left: 80px solid #2B5891;
width: 0;
}
.shadow{
position: absolute;
width: 100px;
height: 110px;
background: #2B5891;
bottom: 20px;
right: 25px;
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
transform: rotate(45deg);
box-shadow: 10px 0px 9px -6px rgba(0,0,0,0.5);
}

create multiple evenly spaced horizontal lines with only css

Is it possible to create multiple horizonal evenly spaced lines using only CSS? I am trying to replicate the look of a notecard and I would prefer not to use images. Seems like this should be possible. It looks like this person accomplished what i want to do, but they are using mozilla specific tags: Fiddle
Guess I have to add in code if I include a fiddle link.
The CSS from that page:
div {
background:
-moz-repeating-linear-gradient(center top , #fafafa, #fafafa 22px, #81CBBC 24px) repeat scroll 0 0 transparent;
border: 1px solid #f6f6f6;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin: 30px auto;
padding: 22px 15px 40px;
position: relative;
width: 400px;
color: #444;
}
h1 {
font: 24px/26px 'Helvetica Neue', Arial;
margin: 0 0 6px;
}
li {
font: 12px/16px Georgia;
margin: 0 0 7px;
}
div:before {
content: '';
z-index: -1;
width: 433px;
position: absolute;
bottom: -12px;
left: 4px;
height: 190px;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
background: -moz-repeating-linear-gradient(center top , #fafafa, #fafafa 22px, #81CBBC 24px) repeat scroll 0 0 transparent;
-moz-transform: rotate(-1deg);
}
div:after{
content: '';
z-index: -3;
width: 433px;
position: absolute;
bottom: -18px;
left: 6px;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
height: 190px;
background: -moz-repeating-linear-gradient(center top , #fafafa, #fafafa 22px, #81CBBC 24px) repeat scroll 0 0 transparent;
-moz-transform: rotate(-1deg);
}

Is this what you mean?
Fiddle
box-shadow:0 1px 0 1px #fff, 0 2px 0 1px #ccc, 0 4px 0 1px #fff, 0 5px 0 1px #ccc;

Can CSS3 box-shadow:inset do only one or two sides? like border-top?

I'm wondering about the support for side specific inner shadows in css3.
I know this works great on supported browsers.
div { box-shadow:inset 0px 1px 5px black; }
I'm just curious as to whether there is a way to achieve something like:
div { box-shadow-top:inset 0px 1px 5px black; }

This is what worked for me:
box-shadow: inset 1px 4px 9px -6px;
Example: http://jsfiddle.net/23Egu/

I don't think your really need box-shadow-top because if you set offsetx to 0 and offsety to any positive value only remaining shadow is on top.
if you want to have shadow on top and shadow in the bottom you just can simply use two divs:
<div style="box-shadow:inset 0 1px 5px black;">
<div style="box-shadow:inset 0 -1px 5px black;">
some content
</div>
</div>
if you want to get rid of shadow on sides use rgba instead of hex color and set bigger offsety:
box-shadow:inset 0 5px 5px rgba(0,0,0,.5)
this way you give shadow more opacity so sides stay hidden and with more offset you get less opacity
full example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
body {
background: #1C1C1C;
}
div {
margin: 50px auto;
width: 200px;
height: 200px;
background: #fff;
-webkit-border-radius: 20px;
-khtml-border-radiust: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;
box-shadow:inset 0px 5px 5px rgba(0,0,0,.5);
}
div > div {
background:none;
box-shadow:inset 0px -5px 5px rgba(0,0,0,.5);
}
</style>
</head>
<body>
<div><div></div></div>
</body>
</html>

using :before and after elements with regular shadows cut of by overflow:hidden on the parent box like in this example: http://dabblet.com/gist/2585782
CSS
/**
* Top and Bottom inset shadow
*/
#element{
background-color: #E3F2F7;
height: 55px;
position: relative; /* to position pseudo absolute*/
overflow: hidden; /* to cut of overflow shadow*/
margin-top: 200px;
}
#element:before , #element:after{
content: "\0020";
display: block;
position: absolute;
width: 100%;
height: 1px; /* when 0 no shadow is displayed*/
box-shadow: #696c5c 0 0 8px 0;
}
#element:before { top: -1px} /* because of height: 1*/
#element:after { bottom: -1px} /* because of height: 1*/
HTML
<div id="element"></div>

You can use a background gradient for a work around in most cases:
SCSS(with compass) example:
#include background(linear-gradient(top, #666 1%, #999 3%, #ddd 6%, #f6f6f6 9%, #f6f6f6 92%, #ddd 94%, #999 97%, #666 99%) );

box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);
-moz-box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);
-o-box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);
This works just lovely :)
Here is a codepen illustrating it:
http://codepen.io/poopsplat/pen/cGBLy

For the same shadow but only on the top :
box-shadow: inset 0px 6px 5px -5px black;
To have the shadow in one direction you have to negate the "blur" parameter with the "spread" parameter and then adjust the "h-pos" and/or "v-pos" parameters by this same value.
It doesn't work with opposite border or triple border. You have to add one more definition.
More examples here : http://codepen.io/GBMan/pen/rVXgqP

No, not directly, but you can crop off the parts that you don't want by putting it in a div with overflow: hidden:
http://jsfiddle.net/Vehdg/

I just had this problem myself. The solution that I found was with multiple box-shadows (one for each side that you want your shadow). Here is the definition:
box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;
Here is how to think it:
first, make the spread 0 (this will disable the effect on all sides)
the h-offset (if you set it to be positive, it will cast on the left side, if you set it negative, on the right side)
the v-offset (if you set it to be positive, it will cast on the top side, if you set it negative, on the bottom side
Here you can see my case with box-shadow on three sides (left, top, right and the bottom is with same color as the background to create the effect that I wanted - the left side and the right go all the way to the bottom)
https://codepen.io/cponofrei/pen/eMMyQX

You can accomplish a single-sided, inner shadow by setting your div to overflow:hidden and adding shadow elements along the borders.
Set an inner shadow on the top and bottom borders of a division:
HTML
&ltdiv id="innerShadow">
&ltdiv id="innerShadowTop">
Content...
&ltdiv id="innerShadowBottom">
&lt/div>
CSS
#innerShadow
{
position: relative;
overflow: hidden;
}
#innerShadowTop
{
width: 100%;
height: 1px;
margin: 0;
padding: 0;
position: absolute;
top: -1px;
-moz-box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
-webkit-box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
-o-box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
}
#bannerShadowBottom
{
width: 100%;
height: 1px;
margin: 0;
padding: 0;
position: absolute;
bottom: -1px;
-moz-box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
-webkit-box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
-o-box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
}

box-shadow is for all four sides. You can't change that (yet?). The 4 sizes in the box-shadow definition are OffsetX, offsetY, Blur and Spread.

Multiple box shadows did the trick for me.
box-shadow:
inset 0 -8px 4px 4px rgb(255,255,255),
inset 0 2px 4px 0px rgba(50, 50, 50, 0.75);
http://jsfiddle.net/kk66f/

Is it possible to set transparency in CSS3 box-shadow?

Is it possible to set transparency on the box shadow?
This is my code:
box-shadow:10px 10px 10px #000;
-webkit-box-shadow:10px 10px 10px #000;
-moz-box-shadow: 10px 10px 10px #000;

I suppose rgba() would work here. After all, browser support for both box-shadow and rgba() is roughly the same.
/* 50% black box shadow */
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
div {
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
color: white;
background-color: red;
margin: 10px;
}
div.a {
box-shadow: 10px 10px 10px #000;
}
div.b {
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
}
<div class="a">100% black shadow</div>
<div class="b">50% black shadow</div>

Resources