KnowledgeHub
Questions
Tags
Users
Search
Alex Rivera
|
Logout
Edit Question
Title
Body
I generated a bubble chat thingy from http://www.ilikepixels.co.uk/drop/bubbler/ In my page I put a number inside of it .bubble { position: relative; width: 20px; height: 15px; padding: 0; background: #FFF; border: 1px solid #000; border-radius: 5px; } .bubble:after { content: ""; position: absolute; top: 4px; left: -4px; border-style: solid; border-width: 3px 4px 3px 0; border-color: transparent #FFF; display: block; width: 0; z-index: 1; } .bubble:before { content: ""; position: absolute; top: 4px; left: -5px; border-style: solid; border-width: 3px 4px 3px 0; border-color: transparent #000; display: block; width: 0; z-index: 0; } I want the background-color of the bubble to change according to the number inside of it via rgb so if my div is <div class="bubble" style="background-color: rgb(100,255,255);"> 100 </div> I want the color to be rgb(100,255,255) The thing is this doesn't affect the triangle. How do I write the inline css so it will include the :before and :after?
Tags (comma-separated)
Save Edits
Cancel