怎么实现一个消息通知的一个柜形加三角形，如下图和代码

6回答

蝴蝶刀刀

图片 svg <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> *{ padding: 0; margin: 0; } div{ width: 100px; height: 50px; background-color: #f5f5f5; position: relative; line-height: 50px; text-align: center; border: 1px solid #cdcdcd; border-radius: 4px; } div:after{ content: ''; width: 0; height:0; border: 20px solid #f5f5f5; border-color: #f5f5f5 transparent transparent transparent; position: absolute; bottom: 0; left: 50%; transform: translate(-150%,100%) skew(-60deg,0); } </style> </head> <body> <div>tttt</div> <script> </script> </body> </html> 但三角的边不知道怎么弄了

翻阅古今

css 伪类，百度例子一堆

叮当猫咪

<div style=" margin-top: 100px;width: 300px;height: 300px;position: relative;border: 1px solid #000000"> <div style="width:0; height:0; border-width:30px; border-style:solid; border-color:transparent transparent #000 transparent; position: absolute;top: -60px;left: 100px; "></div> <em style="display: block;width:0; height:0; border-width:29px; border-style:solid; border-color:transparent transparent #fff transparent;position: absolute;top: -57px;left: 101px;"></em> </div>如果不是斜的三角形你可以考虑这个，方向改变一下,如果一定要你图中斜的三角形，推荐用svg吧.

倚天杖

伪元素加背景图片如果不限麻烦

繁星淼淼

<div style="height: 0;width:0;border: 10px solid transparent;border-top-color: #f75a47;transform: skewX(-50deg)"></div> 跟图中效果有点不一样，三角形周围的一圈边框没有实现，因为是用一个div的border实现的三角形，题主可以用同样的思路再使用多个div即可实现补充一点：题主的问题跟标签中的大部分语言八竿子打不着，不如加个css或者htmlcodePen