我想用CSS制作一个矩形框，然后是一个小三角形，如this。而且我已经完成了它，但我希望使用＆＃34;：＆＃34;后的相同输出。我已经尝试了，但我无法打印任何内容。
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>
答案 0 :(得分：4)
这里的: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;
}
答案 1 :(得分：2)
我认为这个网站可以帮助您： https://css-tricks.com/examples/ShapesOfCSS/
<div id="talkbubble"></div>var fields = [ {
"value": "First name",
"type": "text",
"validation": "not empty"
}, {
"value": "Email address",
"type": "text",
"validation": new RegExp(..)
}, {
"value": "Phone number",
"type": "text",
"validation": "not empty"
}, {
"value": "Contact",
"type": "option",
"values": [ "Contact me by email", "Contact me by phone" ]
"validation": "any"
} ];
答案 2 :(得分：1)
使用时：必须定义内容后，因为您的元素没有文本内容，只需执行此操作即可！
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);
}
答案 3 :(得分：1)
#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>
答案 4 :(得分：1)
Kadriles是对的，但我已经做了一个简单的例子，没有任何负边距或框尺寸
.html.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;
}
答案 5 :(得分：1)
我找到了 IOS Style 的示例，而左/右（发件人/收件人）可能有帮助：
$scope.querySearch = function (query) {
$http({
url: '/api/GateMoveAPI/GetCustomerData',
method: 'GET',
params: { sSearchText: query }
}).success(function (data, status, headers, config) {
$scope.items = data;
});
}
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;
}
答案 6 :(得分：0)
如果您想在形状周围有边框并且更具适应性，请尝试以下操作： 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);
}