![ARWZGD]N9IS13T~BG$5YHRW.png](http:https://img.haomeiwen.com/i1681524/73755250ebe10f8b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
提示框箭头实现
效果图如下
箭头.png
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--code here-->
<title>demo</title>
<style>
.callout {
width: 100px;
height: 100px;
background-color: grey;
position: relative;
}
.callout::before {
content: "";
position: absolute;
top: -.4em; left: 1em;
padding: .35em;
background: inherit;
border: inherit;
border-right: 0;
border-bottom: 0;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="callout">
WTF?
</div>
<script>
</script>
</body>
</html>
效果图
RI$)效果图.png
总结
核心还是使用伪元素before做一个正方形然后用transform旋转得到一个菱形并用绝对定位移动到自己想要的位置，可以看下图。
伪元素设置为红色后.png
网友评论