我想用下面的圖像創建CSS3的程式化邊框。但是,我不知道如何?以下是圖像:如何使用CSS3創建語音 - 氣泡邊框
-2
A
回答
1
喜歡這個:http://nicolasgallagher.com/pure-css-speech-bubbles/
.triangle-isosceles {
position:relative;
padding:15px;
margin:1em 0 3em;
color:#000;
background:#f3961c;
/* css3 */
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
background:-moz-linear-gradient(top, #f9d835, #f3961c);
background:linear-gradient(top, #f9d835, #f3961c);
}
/* creates triangle */
.triangle-isosceles:after {
content:"";
display:block; /* reduce the damage in FF3.0 */
position:absolute;
bottom:-15px;
left:50px;
width:0;
border-width:15px 15px 0;
border-style:solid;
border-color:#f3961c transparent;
}
0
1
<style type="text/css">
.comments .comment{
width:10%;
margin-bottom:20px;
}
.comments .comment p{
margin:0 0 10px 0;
}
.bubble{
position:relative;
background-color:#CCC;
padding:20px;
color:#009;
border-radius:3px;
margin-left:20px;
}
.bubble::after{
content:"";
display:block;
position:absolute;
left:-15px;
top:15px;
width:0px;
height:0px;
border-top:8px solid transparent;
border-bottom:8px solid transparent;
border-right:15px solid #CCC;
}
</style>
<div class="comments">
<div class="comment bubble">
<p>This is comment</p>
</div>
</div>
相關問題
- 1. CSS語音氣泡邊框問題
- 2. 帶邊框的純CSS語音泡泡
- 3. 如何在cocoa-Touch中創建語音氣泡
- 4. 氣泡圖創建
- 5. 如何在css3中創建邊框
- 6. 如何在Cocoa中創建黑邊氣泡窗口?
- 7. 使用Reactjs和D3創建氣泡圖
- 8. 創建氣泡圖與GGPLOT2
- 9. 如何創建漫畫式氣泡對話框?
- 10. 如何使用netbean創建「幫助/信息氣泡」
- 11. 如何使用R來創建梯度填充的氣泡圖
- 12. 如何使用CSS3製作內邊框?
- 13. 如何使用JavaScript創建語音?
- 14. CSS/HTML語音泡泡
- 15. 如何在Android中創建氣泡遊戲用戶界面
- 16. CSS3 - 如何在矩形上創建圓形邊框半徑?
- 17. 使用HTML5 CSS3動畫使用文本到語音的音頻?
- 18. 如何創建使用泡菜在Python
- 19. CSS3角邊框
- 20. 如何在googleMap中創建標記的氣泡
- 21. 如何在地圖上創建信息氣泡(不是Google API)
- 22. 如何在閃光燈中創建起泡或氣體效果?
- 23. 如何在css3中創建陰影框
- 24. 如何使用交換功能爲雙向鏈表創建氣泡排序?
- 25. 如何創建CSS3
- 26. CSS語音氣泡自動調整大小?
- 27. 繪製語音氣泡與自動大小
- 28. 使用jsqmessegesviewcontroller創建自定義泡泡
- 29. 邊框周圍的氣泡+箭頭(三角形)在css
- 30. 氣泡圖中的Tabluea氣泡
嗨, 謝謝。是的,我看着你給的東西。但是,在網站上沒有任何文檔說明我如何使用它來進行每種設計?你能讓我知道嗎? – 2013-03-14 16:17:22