需要的样式数据:
下面是我实现的代码:
<style type="text/css">
#demo{
width: 100px;
height: 100px;
border-radius: 1px;
border:2px solid #000;
position: relative;
}
#demo::after{
content: "";
width: 14px;
height: 14px;
border-top: 2px solid #000;
border-right: 2px solid #000;
background-color: #fff;
-webkit-transform:rotateZ(45deg);
transform:rotateZ(45deg);
position: absolute;
left:94px;
/*left=90时候 是不算border的 90+4是正确的*/
top:32px;
/*left=2才是要求的距离顶部为0*/
}
</style>
</head>
<body>
<div id="demo"></div>
</body>
最后代码效果如下:
实现思路:
使用::after添加一个方块,上右border黑色,然后旋转45度放在图示位置挡住原本的border;
要点:关于top,left的数据问题,需要考虑边界,正常认为是top:30px;left:90px;但是实际却会偏移,这是因为border的原因,需要把自身的border也考虑在内。