CSS speech bubble with full background image -


i know it's quite easy add small triangle bottom of element, want background image extend triangle. how achieve this?

here answered yesterday: creating transparent arrow above image in css3

but having triangle on bottom, this:

.image {     position:relative;     height:200px;     width:340px;     background:orange; } .image:before, .image:after {     content:'';     position:absolute;     height:0;     border-bottom:20px solid white;     bottom:0; } .image:before {     left:0;     width:20px;     border-right:16px solid transparent; } .image:after {     left:36px;     right:0;     border-left:16px solid transparent; } 

and demo

for fancier use masking , clip-path.


Comments

Popular posts from this blog

Change php variable from jquery value using ajax (same page) -

Pull out data related to my apps from Android Play Store and iOS App Store -

How can I fetch data from a web server in an android application? -