使用CSS为SVG和DIV提供相同的背景色

Question

I really did not understand much about masking/clipping. I´m trying something new with svg as a arrow for a chat bubble. Here is my 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 my question is: how can I give the svg before element and the div itself the same background color. Right now both are overlapping...

Answer 1

The easiest fix would be, if you used a solid color instead of a transparent one.

replace

background: rgba(255, 255, 255, 0.1);

with

background: #2A3847;

With that the overlap wont be visible.

EDIT:

If you want to keep transparency, you can make the bubble shape separate from the text, stretch it over your original bubble and make it solid color with 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 */
}

full codepen

Answer 2

I didn't dig very far into the issues you might have with svgs, but it looks like your problem is just using a background color with opacity.

I just switched to using full opacity color on the bubble and the arrow and it fixed it.

background: rgba(41, 57, 71, 1);