在底部引用帶有三角形的氣泡

Question

我無法弄清楚如何使用左下角的三角形制作CSS引用氣泡。我發現了大量用於語音氣泡的CSS，但是它們不會隨文本擴展，或者三角形不在左下角（我需要它）。

我發現了一個我非常喜歡的氣泡，但它的左側是三角形，因爲它被編碼爲聊天。如果有人可以向我解釋如何調整此代碼以使氣泡進入左下角，那將不勝感激！

.bubble{ 
    background-color: #F2F2F2; 
    border-radius: 5px; 
    box-shadow: 0 0 6px #B2B2B2; 
    display: inline-block; 
    padding: 10px 18px; 
    position: relative; 
    vertical-align: top; 
    float: left; 
    margin: 5px 45px 5px 20px;  
} 

.bubble::before { 
    background-color: #F2F2F2; 
    content: "\00a0"; 
    display: block; 
    height: 16px; 
    position: absolute; 
    top: 11px; 
    transform:    rotate(29deg) skew(-35deg); 
     -moz-transform: rotate(29deg) skew(-35deg); 
     -ms-transform:  rotate(29deg) skew(-35deg); 
     -o-transform:  rotate(29deg) skew(-35deg); 
     -webkit-transform: rotate(29deg) skew(-35deg); 
    width: 20px; 
    box-shadow: -2px 2px 2px 0 rgba(178, 178, 178, .4); 
    left: -9px; 
} 

這是工作在的jsfiddle：http://jsfiddle.net/24S5L/2/

預先感謝您爲您可以提供任何幫助！

Answer 1

在底部獲得箭頭是相當容易，只需使用bottom，而不是top，只是在rotate一些調整和skew

CSS

.chat { 
    width: 400px; 
} 
.bubble { 
    background-color: #F2F2F2; 
    border-radius: 5px; 
    box-shadow: 0 0 6px #B2B2B2; 
    display: inline-block; 
    padding: 10px 18px; 
    position: relative; 
    vertical-align: top; 
    margin: 20px 10px; 
} 
.bubble::before { 
    background-color: #F2F2F2; 
    content:"\00a0"; 
    display: block; 
    height: 16px; 
    width: 16px; 
    position: absolute; 
    bottom: -7.5px; 
    transform: rotate(47deg) skew(5deg); 
    -moz-transform: rotate(47deg) skew(5deg); 
    -ms-transform: rotate(47deg) skew(5deg); 
    -o-transform: rotate(47deg) skew(5deg); 
    -webkit-transform: rotate(47deg) skew(5deg); 
    box-shadow: 2px 2px 2px 0 rgba(178, 178, 178, .4); 
} 

Demo

你可以刪除div.chat來自HTML和CSS。沒有必要。

Answer 2

你是指底部的左邊還是底部？

如果你指的是左邊的底部，那麼只需更換：

top: 11px; 

與

bottom: 11px; 

是這樣的...

.bubble::before { 
background-color: #F2F2F2; 
content: "\00a0"; 
display: block; 
height: 16px; 
position: absolute; 
bottom: 11px; 
transform:    rotate(29deg) skew(-35deg); 
    -moz-transform: rotate(29deg) skew(-35deg); 
    -ms-transform:  rotate(29deg) skew(-35deg); 
    -o-transform:  rotate(29deg) skew(-35deg); 
    -webkit-transform: rotate(29deg) skew(-35deg); 
width: 20px; 
box-shadow: -2px 2px 2px 0 rgba(178, 178, 178, .4); 
left: -9px; 
} 

如果不是讓我知道和我之前將它定位在底部。
讓我知道你如何繼續！

Answer 3

JS FIDDLE - 這是你想要的嗎？

.bubble{ 
    background-color: #F2F2F2; 
    border-radius: 5px; 
    box-shadow: 0 0 6px #B2B2B2; 
    display: inline-block; 
    padding: 10px 18px; 
    position: relative; 
    vertical-align: top; 
    float: left; 
    margin: 5px 45px 5px 20px;  
} 


.bubble:before { 
    background-color: #F2F2F2; 
    bottom: -5px; 
    box-shadow: -2px 2px 2px 0 rgba(178, 178, 178, 0.4); 
    content: " "; 
    display: block; 
    height: 13px; 
    left: 11px; 
    position: absolute; 
    transform: rotate(-68deg) skew(-35deg); 
    width: 15px; 
} 

Answer 4

我認爲這是個竅門。這也是THE FIDDLE的一個分支。

.bubble{ 
    position: relative; 
    display: inline-block; 

    float: left; 
    clear: left; /* don't think you'll need this... it's going to be absolute eventually I bet */ 

    background-color: white; 
    padding: 1em; 

    box-shadow: 0px 0px 2px 2px rgba(0,0,0,.3); /* adjust howevers */ 
    border-radius: .2em; 

    /* for placement only */ 
    margin-bottom: 2em; 
} 


.bubble:before { 
    content: " "; 
    position: absolute; 
    display: block; 
    background-color: white; 

    height: 14px; /* you can do fancier stuff, but then the tringle digs into the box further... */ 
    width: 14px; 
    bottom: -7px; /* < or = to half the fake triangle's width? */ 
    left: 15px; 

    box-shadow: 2px 2px 2px 0 rgba(0,0,0,.3); /* adjust howevers */ 

    -webkit-transform: rotate(45deg); 
    transform: rotate(45deg); 
} 

Answer 5

• 簡單浮動CSS報價箱體採用圓角，三角形的尖端，和Box陰影：
  

我就遇到了這個類似的問題，太多的無奈之後，這是我結束了。

見小提琴這裏：http://jsfiddle.net/erikthedeveloper/CASJY/

從本質上講，我有一個.quote框格，裏面的p和兩個div的（.Q-尖端和.Q受體阻滯劑）。

我旋轉「尖」來創建一個三角形。將它置於引用框底部的正中間，並用我的.blocker div「阻止」提示的上半部分。這在報價框和提示周圍留下了一個很好的陰影。

HTML

<div class="quote-box"> 
     <p> 
     "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, deleniti fugit quo tempora cupiditate in! Esse, consectetur adipisicing elit. Impedit, deleniti fugit quo tempora cupiditate in! Esse, excepturi..." 
     </p> 
     <!--[if gte IE 10]> --> 
     <div class='q-tip q-rotate q-shadow'></div> 
     <div class="q-blocker"></div> 
     <!-- <![endif]--> 
    </div> 
</div> 

CSS

.quote-box{ 
    position: relative; 
    width:100%; 
    height: 150px; 
    background-color: #fff; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    -khtml-border-radius: 5px; 
    border-radius: 5px; 
} 
.quote-box p{ 
    width: 90%; 
    margin: 1.5em auto; 
    font-size: 0.85em; 
    font-style: italic; 
    line-height: 1.75em; 
    color: #636363; 
    max-height: 200px; 
    overflow: hidden; 
    padding-top: 10px; 
} 
.quote-box-tip{ 
    font-size: 2em; 
    position: relative; 
    height: 1em; 
    width: 0; 
    left:45%; 
    bottom:.5em; 
} 

.q-shadow, .quote-box{ 
    -moz-box-shadow: 1px 1px 2px 0 #000; 
    -webkit-box-shadow: 2px 2px 2px 0 #000; 
    box-shadow:   1px 1px 2px 0 #000; 
} 
.q-tip{ 
    height:20px; 
    width:20px; 
    background-color:#fff; 
    position:absolute; 
    bottom:-10px; 
    left:0; 
    right: 0; 
    margin: auto; 
    z-index:1; 
} 
.q-blocker{ 
    width:80%; 
    height:20px; 
    background-color:#fff; 
    position:absolute; 
    bottom:0; 
    z-index:2; 
    left: 0; 
    right: 0; 
    margin: auto; 
} 
.q-rotate{ 
    /* Not working in IE8 and lower */ 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.5); 
} 

我希望幫助！