html – 像聊天一样的三角形框

概述我想用CSS制作一个矩形框,然后是一个小三角形,如 this.我已经完成了但是我希望使用“：after”输出相同的输出.我试过但我不能打印任何东西. p { display:inline-block; padding:5px 6px 8px 6px; border-radius: 6px; float: right; 我想用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>

解决方法 这是相同的输出：属性后：

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

总结

以上是内存溢出为你收集整理的html – 像聊天一样的三角形框全部内容，希望文章能够帮你解决html – 像聊天一样的三角形框所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。