Box mit einem Dreieck wie ein Chat

Ich möchte mit CSS eine rechteckige Box, gefolgt von einem kleinen Dreieck, wie this. Und ich habe es getan, aber ich möchte die gleiche Ausgabe mit dem ": nach". Ich habe versucht, aber ich kann nichts drucken.Box mit einem Dreieck wie ein Chat

p { 
 
     display:inline-block; 
 
     padding:5px 6px 8px 6px; 
 
     border-radius: 6px; 
 
     float: right; 
 
     margin-right: 40px; 
 
     color:black; 
 
     background-color:#146f79; 
 
} 
 

 
span { 
 
      position:absolute; 
 
      margin-top:-6px; 
 
      margin-left:-5px; 
 
      border-left: 12px solid transparent; 
 
      border-right: 12px solid transparent; 
 
      border-bottom: 12px solid #146f79; 
 
      transform:rotate(-45deg); 
 
}

<p> 
 
Hello!!!<span></span> 
 
</p>

Quelle

2016-04-28 reuseman

Wenn Sie '' Position: absolute'' im Auge behalten, 'zu verwenden 'top, left, right, bottom'' Regeln mehr als '' margins''. Und in Fällen wie diesem, geben Sie dem Elternteil eine '' position: relative'' – Ardian

Sie können Ihre Antwort bereits hier finden: [Sprechblase mit Pfeil] (http://stackoverflow.com/questions/30299093/speech-bubble-with -Pfeil) – jbutler483

Hier ist die gleiche Leistung mit :after Eigenschaft:

HTML

<p> 
    Hello!!! 
</p>

CSS

p { 
    display:inline-block; 
    padding:5px 6px 8px 6px; 
    border-radius: 6px; 
    float: right; 
    margin-right: 40px; 
    color:black; 
    background-color:#146f79; 
    position: relative; 
} 

p:after { 
    content: ""; 
    position:absolute; 
    margin-top:-6px; 
    margin-left:-5px; 
    border-left: 12px solid transparent; 
    border-right: 12px solid transparent; 
    border-bottom: 12px solid #146f79; 
    transform:rotate(-45deg); 
    right: -15px; 
    top: 10px; 
}

Fiddle

Quelle

2016-04-28 17:17:23

Ich denke, diese Hilfe vor Ort Sie: https://css-tricks.com/examples/ShapesOfCSS/

#talkbubble { width: 120px; height: 80px; background: red; position: relative; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } 
 

 
#talkbubble:before { content:""; position: absolute; left: 100%; top: 26px; width: 0; height: 0; border-top: 13px solid transparent; border-left: 26px solid red; border-bottom: 13px solid transparent; }

<div id="talkbubble"></div>

Quelle

2016-04-28 17:13:04 aghilpro

Bei Verwendung: nach Inhalt definiert werden müssen, da Ihr Element keinen Textinhalt hat einfach tun Dies!

p:after { 
    content: ""; 
    position:absolute; 
    margin-top:-6px; 
    margin-left:-5px; 
    border-left: 12px solid transparent; 
    border-right: 12px solid transparent; 
    border-bottom: 12px solid #146f79; 
    transform:rotate(-45deg); 
}

Quelle

2016-04-28 17:19:32 42shadow42

#chatbubble { 
 
    margin-left:25px; 
 
    width:120px; 
 
    height:40px; 
 
    background-color:green; 
 
    position:relative; 
 
    -moz-border-radius:5px; 
 
    -webkit-border-radius:5px; 
 
    border-radius:5px; 
 
    line-height:40px; 
 
    text-align:center; 
 
} 
 
#chatbubble:after { 
 
    content:""; 
 
    position:absolute; 
 
    right:-13px; 
 
    border-right:13px solid transparent; 
 
    border-left:13px solid transparent; 
 
    border-top:13px solid green; 
 
}

<div id="chatbubble">Hello</div>

Quelle

2016-04-28 17:27:14

Kadriles ist richtig, aber ich habe schon einfaches Beispiel ohne negativen Marge oder Kastengrößen

.bubble { 
 
    position: absolute; 
 
    background: slategray; 
 
    color: white; 
 
    padding: 6px 10px; 
 
    border-radius: 5px 0 5px 5px; 
 
} 
 

 
.bubble:after { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 100%; 
 
    top: 0; 
 
    border-top: 8px solid slategray; 
 
    border-right: 12px solid transparent; 
 
}

<div class="bubble">Hello</div>

Quelle

2016-04-28 17:35:33 nikoloza

ich ein Beispiel gefunden mit IOS Stil und links/rechts (Sender/Empfänger) Möglichkeit vielleicht hilft:

body { 
 
    background-color: #eee; 
 
    color: #222; 
 
    font: 0.8125em/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif; 
 
} 
 

 
.container { 
 
    padding: 40px 20px; 
 
    margin: 0 auto; 
 
    width: 400px; 
 
} 
 

 
.bubble { 
 
    background-image: linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%); 
 
    background-image: -o-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%); 
 
    background-image: -moz-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%); 
 
    background-image: -webkit-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%); 
 
    background-image: -ms-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%); 
 
    background-image: -webkit-gradient(
 
\t linear, 
 
\t left bottom, 
 
\t left top, 
 
\t color-stop(0.25, rgb(210,244,254)), 
 
\t color-stop(1, rgb(149,194,253)) 
 
); 
 
    border: solid 1px rgba(0, 0, 0, 0.5); 
 
    /* vendor rules */ 
 
    border-radius: 20px; 
 
    /* vendor rules */ 
 
    box-shadow: inset 0 5px 5px rgba(255, 255, 255, 0.4), 0 1px 3px rgba(0, 0, 0, 0.2); 
 
    /* vendor rules */ 
 
    box-sizing: border-box; 
 
    clear: both; 
 
    float: left; 
 
    margin-bottom: 20px; 
 
    padding: 8px 30px; 
 
    position: relative; 
 
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7); 
 
    width: auto; 
 
    max-width: 100%; 
 
    word-wrap: break-word; 
 
} 
 

 
.bubble:before, .bubble:after { 
 
    border-radius: 20px/10px; 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
} 
 

 
.bubble:before { 
 
\t border: 10px solid transparent; 
 
\t border-bottom-color: rgba(0, 0, 0, 0.5); 
 
\t bottom: 0; 
 
\t left: -7px; 
 
\t z-index: -2; 
 
} 
 

 
.bubble:after { 
 
    border: 8px solid transparent; 
 
    border-bottom-color: #d2f4fe; 
 
    bottom: 1px; 
 
    left: -5px; 
 
} 
 

 
.bubble--alt { 
 
    background-image: linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%); 
 
    background-image: -o-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%); 
 
    background-image: -moz-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%); 
 
    background-image: -webkit-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%); 
 
    background-image: -ms-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%); 
 
    background-image: -webkit-gradient(
 
\t linear, 
 
\t left bottom, 
 
\t left top, 
 
\t color-stop(0.25, rgb(172,228,75)), 
 
\t color-stop(1, rgb(122,205,71)) 
 
); 
 
    float: right; 
 
} 
 

 
.bubble--alt:before { 
 
    border-bottom-color: rgba(0, 0, 0, 0.5); 
 
    border-radius: 20px/10px; 
 
    left: auto; 
 
    right: -7px; 
 
} 
 

 
.bubble--alt:after { 
 
    border-bottom-color: #ace44b; 
 
    border-radius: 20px/10px; 
 
    left: auto; 
 
    right: -5px; 
 
}

<div class="container"> 
 
\t <div class="bubble"> 
 
\t \t Box with a triangle like a chat 
 
\t </div> 
 
\t 
 
\t <div class="bubble bubble--alt"> 
 
\t \t Stackoverflow.com 
 
\t </div> 
 
\t 
 
\t <div class="bubble"> 
 
\t \t Lorem ipsum dolor sit amet, magna facer et eam, vis ne laoreet voluptatum, cu tale erat vivendo pri. Ne nec nibh dicant quaestio. At sit erant movet possim, no viderer forensibus duo. 
 
\t </div> 
 
\t 
 
\t <div class="bubble bubble--alt"> 
 
\t \t Lorem ipsum dolor sit amet, magna facer et eam, vis ne laoreet voluptatum. 
 
\t </div> 
 
\t 
 
</div>

Quelle

2016-04-28 17:55:41

Box mit einem Dreieck wie ein Chat

Antwort

Verwandte Themen