4

Android や iPhone デバイスと同じように、メッセージ (スレッド ビュー) に似た html ページを作成しようとしています。

これが私がコーディングしたものです

CSS スタイル:

<style type='text/css'>
.triangle-right 
 {  
        position:relative;   
        padding:15px;   
        color:#fff;   
        background:#075698;   
        background:-webkit-gradient(linear, 0 0, 0 100%, from(#2e88c4), to(#075698));   background:-moz-linear-gradient(#2e88c4, #075698);   
        background:-o-linear-gradient(#2e88c4, #075698);   
        background:linear-gradient(#2e88c4, #075698);   
        -webkit-border-radius:10px;   
        -moz-border-radius:10px;   
        border-radius:10px;   
 }   
 .triangle-right.top   
 {     
    background:-webkit-gradient(linear, 0 0, 0 100%, from(#075698), to(#2e88c4));   
    background:-moz-linear-gradient(#075698, #2e88c4);   
    background:-o-linear-gradient(#075698, #2e88c4);   
    background:linear-gradient(#075698, #2e88c4);   
 }   
 .triangle-right.left   
     {   
            margin-left:10px;background:#075698;   
     }   
     .triangle-right.right   
     {   
        margin-right:10px;  background:#075698;   
     }   
     .triangle-right:after    
     {   
     content:'';   
         position:absolute;   
         bottom:-20px;left:50px;border-width:20px 0 0 20px;border-style:solid;border-color:#075698 transparent; display:block;width:0;   
     }   
     .triangle-right.top:after    
     {   
        top:-20px;right:50px;bottom:auto;left:auto;border-width:20px 20px 0 0;border-color:transparent #075698;    
     }   
 .triangle-right.left:after    
     {   
        top:16px;left:-15px;    bottom:auto;border-width:0 15px 15px 0;border-color:transparent #E8E177;   
     }   
     .triangle-right.right:after   
     {   
        top:16px;right:-15px;bottom:auto;left:auto;border-width:0 0 15px 15px; border-color:transparent #8EC3E2 ;   
 }  
.triangle 
{
width: 0;
height: 0;
    border-left: 50px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 50px solid #fc2e5a;
}

いくつかの値を変更してみました

     .triangle-right.left:after    
     {   
        top:16px;left:-15px;    bottom:auto;border-width:0 15px 15px 0;border-color:transparent #E8E177;   
     }   
     .triangle-right.right:after   
     {   
        top:16px;right:-15px;bottom:auto;left:auto;border-width:0 0 15px 15px; border-color:transparent #8EC3E2 ;   
 }

希望どおりの正確な形状が得られません。次の方法でバブルを構築する必要があります

誰でも私を助けることができます

4

4 に答える 4

3

スレッド ビュー メッセージについては、このコードを試してください。

   <div class="messages scroll">
           <div class="item blue">
              <div class="arrow"></div>
              <div class="text">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut diam quis dolor mollis tristique. Suspendisse vestibulum convallis felis vitae facilisis. Praesent eu nisi vestibulum erat.
                </div>
                <div class="date">09.02.2013, 21:04</div>
            </div>
        <div>

CSS スタイル

/* メッセージ */

.body .content .block .messages{position: relative;}
.body .content .block .messages .item{width: 90%; padding: 5px; position: relative; margin: 10px 0px 0px; float: left;}
.body .content .block .messages .item.out{float: right; margin: 10px 0px 10px;}
.body .content .block .messages .item .arrow{border-color: transparent transparent #009AD7 #009AD7; border-style: solid; border-width: 5px;width: 0px; height: 0px; position:absolute; left: 10px; top: -10px;}
.body .content .block .messages .item.out .arrow{left: auto; top: auto; right: 10px; bottom: -10px; border-color: #005683 #005683 transparent transparent;}
.body .content .block .messages .item .text{font-size: 12px; color: #FFF; line-height: 13px;}
.body .content .block .messages .item .date{font-size: 12px; color: #FFF; text-align: right; opacity: 0.6; filter: alpha(opacity=60); line-height: 13px;}

/* eof メッセージ */

ありがとう、

カマラカンナン.M

于 2013-10-16T10:38:46.697 に答える
1

これは、iOS に非常によく似たチャット バブルを作成するための単純な純粋な css3 ソリューションです。私はこのすっきりとした外観で行きます...これは画像を使用しておらず、さまざまなデバイスサイズに対応しています。これが作業コードです。このWebサイトに出くわし、 CSSを少し即興で作成して、画像なしでポインターを作成しました....

HTML

<div class="commentArea">
<div class="bubbledRight">
    Error dicunt theophrastus cu qui. Ad eos simul possit option, adipisci principes sed at. Detracto adolescens pro ea, duo no
</div>
<div class="bubbledLeft">
    Lorem ipsum dolor sit amet, ea oblique constituam signiferumque eam. Pri adipisci maluisset te.
</div>

CSS

.commentArea {
font: 14px Arial;
padding: 0 10px;
margin-top: 20px;    
}

.bubbledLeft,.bubbledRight {
    margin-top: 20px;
    padding: 5px 9px;
    max-width: 50%;
    clear: both;
    position: relative;
}

.bubbledLeft{
    float: left;
    margin-right: auto;
    -webkit-border-radius: 8px 8px 8px 0px;
    -moz-border-radius: 8px 8px 8px 0px;
    -o-border-radius: 8px 8px 8px 0px;
    -ms-border-radius: 8px 8px 8px 0px;
    border-radius: 8px 8px 8px 0px;
    background-color: #65B045;
    color: #ffffff;
}

.bubbledLeft:before {
    border-bottom: 10px solid #65B045;
    border-left: 9px solid rgba(0, 0, 0, 0);
    position: absolute;
    bottom: 0;
    left: -8px;
    content: "";
}

.bubbledRight{
    float: right;
    margin-left: auto;
    text-align: right;
    -webkit-border-radius: 8px 8px 0px 8px;
    -moz-border-radius: 8px 8px 0px 8px;
    -o-border-radius: 8px 8px 0px 8px;
    -ms-border-radius: 8px 8px 0px 8px;
    border-radius: 8px 8px 0px 8px;
    background-color: #07D;
    color: white;
}

.bubbledRight:before {
    border-bottom: 9px solid #07D;
    border-right: 9px solid rgba(0, 0, 0, 0);
    position: absolute;
    bottom: 0;
    right: -8px;
    content: "";
}
于 2014-06-29T08:55:58.960 に答える