html - Shape beside a div -
i'm trying recreate this:
i've got speech bubble finished, don't know how position blue dot 50% of height of speech bubble (the speech bubble can vary in height) , 10px left of it.
here's jsfiddle i've started: http://jsfiddle.net/ghpcr/
html:
<div class="speech-bubble"> sample text. </div> <div class="speech-bubble"> here's <br /> bigger bubble. </div> <div class="dot"></div> css:
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css'); .container { margin-top: 10px; } .dot { width: 13px; height: 13px; background-color: #44769d; border-radius: 50%; } .speech-bubble { position: relative; min-height: 20px; padding: 15px; width: 250px; margin: 10px 0 10px 18px; background-color: #ffffff; border: 1px solid #cccccc; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); } .speech-bubble:after, .speech-bubble:before { position: absolute; right: 100%; display: inline-block; border: solid transparent; content: ""; height: 0; width: 0; pointer-events: none; } .speech-bubble:before { border-color: rgba(204,204,204,0); border-right-color: #ccc; border-width: 9px; top: 50%; margin-top: -9px; } .speech-bubble:after { border-color: rgba(255,255,255,0); border-right-color: #fff; border-width: 8px; top: 50%; margin-top: -8px; }
the idea place dot outside on left, achieved via right: 100%;. next, need shift bit farther, hence margin-right: 10px;. vertical alignment use similar method.
.dot { // ... right: 100%; margin-right: 10px; top: 50%; margin-top: -6.5px; } also note dot must child of speech bubble. posted answer prior presence of actual markup.
Comments
Post a Comment