css -> 弹出带 小三角箭头的 图层
原理是 给 元素 设置 position:relative;
然后给元素的:after , :before 设置显示样式 并 position:absolute
<div id="demo"></div> <style> #demo { width: 100px; height: 100px; background-color: #ccc; position: relative; border: 4px solid #333; } #demo:after, #demo:before { border: solid transparent; content: ' '; height: 0; left: 100%; position: absolute; width: 0; } #demo:after { border-width: 9px; border-left-color: #ccc; top: 15px; } #demo:before { border-width: 14px; border-left-color: #333; top: 10px; } </style>
************ 箭头向上 --------------
<div id="demo"></div> <style> #demo { width: 100px; height: 100px; margin-top:50px; background-color: #ccc; position: relative; border: 4px solid #333; } #demo:after, #demo:before { border: solid transparent; content: ' '; height: 0; position: absolute; width: 0; } #demo:after { border-width: 9px; border-bottom-color: #ccc; top: -18px; left:35px; } #demo:before { border-width: 14px; border-bottom-color: #333; left: 30px; top: -30px; } </style>
相关推荐
myloveqiqi 2020-08-09
AlisaClass 2020-07-19
猫沙盆 2020-07-07
大象从不倒下 2020-07-31
猫沙盆 2020-07-08
云端漂移 2020-07-06
xiaohuli 2020-06-11
葉無聞 2020-06-09
淡风wisdon大大 2020-06-06
福叔 2020-06-02
CaiKanXP 2020-06-02
opspider 2020-05-29
guicaizhou 2020-05-06
jiangfulai 2020-04-11
buttonChan 2020-04-10
jiedinghui 2020-02-20