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
Post a Comment