2013-03-14 72 views

回答

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

嗨, 謝謝。是的,我看着你給的東西。但是,在網站上沒有任何文檔說明我如何使用它來進行每種設計?你能讓我知道嗎? – 2013-03-14 16:17:22

0

可以使用CSS3box_round

.box_round { 
    -webkit-border-radius: 5px; 
      border-radius: 5px; 
} 

嘗試this網站:)

+0

嗨, 謝謝你回答我的問題。但是,我不想只在邊界的半徑。請仔細檢查我上傳的圖片。我也想做左側箭頭 – 2013-03-14 15:59:06

+0

所以請嘗試切斷箭頭並確定正確的位置 – kelly 2013-03-14 16:02:16

+0

難道不可能用CSS3做所有事情嗎? – 2013-03-14 16:15:02

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>