Коробка с треугольником как чат

Я хочу сделать с CSS прямоугольную коробку, за которой следует небольшой треугольник, например this. И я сделал это, но мне хотелось бы получить тот же результат с помощью «: after». Я пробовал, но ничего не могу напечатать.Коробка с треугольником как чат

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>

источник

2016-04-28 reuseman

При использовании '' позиции: absolute'', имейте в виду, чтобы использовать ' 'top, left, right, bottom'' больше правил' 'marginins''. И в таких случаях дайте родительской позиции '' position: relative'' – Ardian

Вы, возможно, найдете свой ответ здесь: [Речевой пузырь со стрелкой] (http://stackoverflow.com/questions/30299093/speech-bubble-with -стрела) – jbutler483

Вот тот же результат с :after собственности:

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

источник

2016-04-28 17:17:23

я думаю, что на этом сайте, поможет вам: 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>

источник

2016-04-28 17:13:04 aghilpro

При использовании: после того, как содержание должно быть определено, так как ваш элемент не имеет текстового содержания просто сделатьэто!

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); 
}

источник

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>

источник

2016-04-28 17:27:14

Kadriles прав, но я уже сделал простой пример, без какого-либо отрицательного края или коробки размером

.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>

источник

2016-04-28 17:35:33 nikoloza

Я нашел пример с IOS Стиль и левый/правый (Sender/Receiver) возможность может быть поможет:

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>

источник

2016-04-28 17:55:41

Коробка с треугольником как чат

ответ

Смежные вопросы