Skip to content

Instantly share code, notes, and snippets.

@narenranjit
Forked from kizu/dabblet.css
Created October 5, 2012 00:40
Show Gist options
  • Save narenranjit/3837373 to your computer and use it in GitHub Desktop.
Save narenranjit/3837373 to your computer and use it in GitHub Desktop.
Triangle with the box-shadow
/**
* Triangle with the box-shadow
*/
.bubble {
position: relative;
width: 30em;
height: 30em;
border-radius: 3em;
background: pink;
box-shadow: 0 .5em 1em rgba(0,0,0,0.3);
}
.triangle {
position: absolute;
top: 100%;
left: 50%;
width: 2em;
height: 2em;
clip: rect(0, auto, 5em, -2em);
}
.triangle:before {
content: "";
display:block;
margin: -1em;
height: 2em;
width: 2em;
background: pink;
box-shadow: .3em .3em 1em rgba(0,0,0,0.3);
transform: scale(0.8, 1) rotate(45deg);
}
<div class="bubble">
<div class="triangle"></div>
</div>
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment