html - Give SVG and DIV the same background color with css -
i did not understand masking/clipping. i´m trying new svg arrow chat bubble. here pen: codepen
*, *::after, *::before { box-sizing: border-box; } html, body, div, b { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } html { font-size: 62.5%; } body { font: { size: 1.6rem; family: 'lato', sans-serif; } background-color: #132333; overflow: hidden; } .chat-container { position: relative; display: block; width: 100%; height: 100%; padding: 60px 40px; } .msg { position: relative; z-index: 100; display: inline-block; width: 100%; &:not(:first-child) { margin-top: 40px; } .box { position: relative; max-width: 900px; width: 70%; padding-bottom: 20px; display: inline-block; .user { position: relative; display: block; float: inherit; vertical-align: top; img { border-radius: 50%; width: 50px; height: 50px; } } .bubble { position: relative; display: block; float: inherit; max-width: 600px; min-height: 100%; padding: 5px 25px; margin: 0 auto; border-radius: 40px; p { text-align: left; font-size: 16px; line-height: 24px; word-wrap: break-word; direction: ltr; } &::before { content: ''; position: absolute; display: block; float: inherit; top: 18px; width: 20px; height: 25px; -webkit-clip-path: url(http://imgh.us/bubble.svg); -webkit-mask: url(http://imgh.us/bubble.svg); clip-path: url(http://imgh.us/bubble.svg#svgclip); z-index: 0; } } .info { position: absolute; bottom: 0; font-size: 12px; color: rgba(255, 255, 255, 0.3); } &.left { float:left; .user img { margin-right: 18px; } .bubble { background: linear-gradient(to right, #4589d0 0%, #1b6fab 100%); p { color: rgba(245, 245, 245, 0.9); } &::before { left: -12px; background: #4589d0; } } .info { left: 65px; } } &.right { float:right; .user img { margin-left: 18px; } .bubble { background: rgba(255, 255, 255, 0.1); p { color: rgba(245, 245, 245, 0.5); } &::before { right: -12px; background: rgba(255, 255, 255, 0.1); -moz-transform: scalex(-1); -webkit-transform: scalex(-1); -o-transform: scalex(-1); transform: scalex(-1); -ms-filter: fliph; /*ie*/ filter: fliph; /*ie*/ } } .info { right: 65px; } } } }<div class="chat-container"> <div class="msg"> <div class="box left"> <div class="user"> <img src="https://pbs.twimg.com/profile_images/515651751291006977/mrdyuj3c_400x400.png" alt="username"> </div> <div class="bubble"> <p>hey digger, wie gehts dir. hast du schon gehört das cih jetzt ein neues chatt-app erstelle für den brwoser? nein okey dann schau mal hier</p> </div> <div class="info"> <b class="pe-clock"></b> <b>sent</b> 8:50 am, <b>from</b> cologne </div> </div> </div> <div class="msg"> <div class="box right"> <div class="user"> <img src="https://pbs.twimg.com/profile_images/515651751291006977/mrdyuj3c_400x400.png" alt="username"> </div> <div class="bubble"> <p>hey digger, wie gehts dir.</p> </div> <div class="info"> <b class="pe-clock"></b> <b>sent</b> 8:50 am, <b>from</b> cologne </div> </div> </div> </div><!-- .chat-container -->so question is: how can give svg before element , div same background color. right both overlapping...
the easiest fix be, if used solid color instead of transparent one.
replace
background: rgba(255, 255, 255, 0.1); with
background: #2a3847; with overlap wont visible.
edit:
if want keep transparency, can make bubble shape separate text, stretch on original bubble , make solid color opacity:
<div class="bubble"> <p>hey digger, wie gehts dir.</p> <div class="bubble-shape"></div> </div> .bubble { position: relative; display: block; float: inherit; max-width: 600px; min-height: 100%; padding: 5px 25px; margin: 0 auto; /* p css */ .bubble-shape { position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: 40px; z-index: -1; &::before { content: ''; position: absolute; display: block; float: inherit; top: 18px; width: 20px; height: 25px; -webkit-clip-path: url(http://imgh.us/bubble.svg); -webkit-mask: url(http://imgh.us/bubble.svg); clip-path: url(http://imgh.us/bubble.svg#svgclip); z-index: -1; } } p { /* css */ } } &.left { /* css */ .bubble { .bubble-shape { background: linear-gradient(to right, #4589d0 0%, #1b6fab 100%); /* p css */ &::before { left: -12px; background: #4589d0; } } } /* css */ } &.right { /* css */ .bubble { .bubble-shape { background: rgb(255, 255, 255); /* solid color */ opacity: 0.1; /* add opacity */ /* p css */ &::before { right: -12px; background: rgb(255, 255, 255); /* solid color */ -moz-transform: scalex(-1); -webkit-transform: scalex(-1); -o-transform: scalex(-1); transform: scalex(-1); -ms-filter: fliph; /*ie*/ filter: fliph; /*ie*/ } } } /* css */ }
Comments
Post a Comment