问题
I want to make with CSS a rectangular box followed by a little triangle, like this. And i've done it but i would like the same output with the ":after". I've tried but i can't print anything.
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>回答1:
Here's the same output with :after property :
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
回答2:
i think this site help you : 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>回答3:
When using :after content must be defined, since your element has no text content simply do this!
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);
}
回答4:
#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>回答5:
I found an example with IOS Style and left / right (Sender / Receiver ) possibility maybe helps:
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(
linear,
left bottom,
left top,
color-stop(0.25, rgb(210,244,254)),
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 {
border: 10px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.5);
bottom: 0;
left: -7px;
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(
linear,
left bottom,
left top,
color-stop(0.25, rgb(172,228,75)),
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">
<div class="bubble">
Box with a triangle like a chat
</div>
<div class="bubble bubble--alt">
Stackoverflow.com
</div>
<div class="bubble">
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.
</div>
<div class="bubble bubble--alt">
Lorem ipsum dolor sit amet, magna facer et eam, vis ne laoreet voluptatum.
</div>
</div>回答6:
Kadriles is right, but I already made simple example without any negative margin or box sizes
.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>回答7:
If you want to have a border around the shape and more adaptable, try this: https://jsfiddle.net/8qg9o3a6/7/
HTML
<div class="bubble-container">This is a bubble</div>
CSS
:root {
--right: -40px;
--sizearrow: 20px;
--height: 120px;
--top: calc(var(--height)/2 - var(--sizearrow));
--bordercolor: #000;
}
.bubble-container {
position: relative;
border: 2px solid var(--bordercolor);
margin: 0 auto;
border-radius: 10px;
height: var(--height);
width: 465px;
}
.bubble-container::after {
content: '';
position: absolute;
right: var(--right);
top: calc(var(--top) + 1.5px);
width: 0;
height: 0;
border: var(--sizearrow) solid transparent;
border-left-color: #fff;
}
.bubble-container::before {
content: '';
position: absolute;
right: calc(var(--right) - 5px);
top: var(--top);
width: 0;
height: 0;
border: 22px solid transparent;
border-left-color: var(--bordercolor);
}
来源：https://stackoverflow.com/questions/36921229/box-with-a-triangle-like-a-chat