时间:2021-07-01 10:21:17 帮助过:187人阅读
首先利用css制作三角形
div { width:0px; height:0px; border-top:20px solid transparent; border-left:20px solid transparent; border-right:20px solid transparent; border-bottom:20px solid green; }
然后就是将这个三角形放到矩形上面注意这里如果想要箭头朝向哪边就将哪边的颜色显示,其余用透明就行
div { width:150px; height:150px; position:relative; margin:50px auto;}div p { border:1px solid #000; width:100px; height:100px;}div span { display:block; width:0px; height:0px; border-top:20px solid transparent; border-left:20px solid transparent; border-right:20px solid transparent; border-bottom:20px solid black; position:absolute; top:-40px; left:0;}div span.blank { border-top:19px solid transparent; border-left:19px solid transparent; border-right:19px solid transparent; border-bottom:19px solid white; top:-37px; left:1px;}
这个具体数值大家可以看情况在进行调节!