怎么实现一个消息通知的一个柜形加三角形，如下图和代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.div{
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 24px;
box-sizing: border-box;
border: 1px solid #cdcdcd;
background-color: #f5f5f5;
}
</style>
</head>
<body>
<div class="div">未答题</div>
</body>
</html>
慕田峪4524236浏览 526回答 6
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
随时随地看视频慕课网APP
PHP