css怎么实现箭头和带缺口提示框？这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容，让我们一起来看看吧！
一、实现如图所示箭头
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .out{ width: 200px; height: 200px; background: #f00; position: relative; } .word{ position: absolute; left: 60px; line-height: 40px; } .triangle-out{ position: absolute; top: 0px; left: 0px; width: 0px; height: 0px; display: block; border-top: 20px solid #f00; border-right: 20px solid #f00; border-bottom: 20px solid #f00; border-left: 40px solid #ff0; } .triangle-in{ position: absolute; top: 0px; left: 0px; width: 0px; height: 0px; display: block; border-top: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 20px solid #f00; } </style> </head> <body> <p class="out"> <span class="triangle-out"></span> <span class="triangle-in"></span> <span class="word">read more</span> </p> </body> </html>二、实现带缺口提示框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>带缺口的提示框-/</title> <style> .wrap{ font-size: 12px; margin:40px auto; width:600px; } .ui-slider-tooltip{ background:#FCFDFD; border:1px solid green; color:#222222; display: block; text-align: center; padding: 5px 3px 5px 3px; width: 190px; position: relative; } .ui-corner-all { -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; -webkit-border-top-left-radius:5px 5px; -webkit-border-top-right-radius:5px 5px; -webkit-border-bottom-right-radius:5px 5px; -webkit-border-bottom-left-radius:5px 5px; } .ui-tooltip-pointer-down { border-bottom-width: 0; border-left: 7px dashed transparent; border-right: 7px dashed transparent; border-top: 8px solid green; bottom: -8px; display: block; height:0; left: 50%; margin-left: -7px; position: absolute; width:0; } .ui-tooltip-pointer-down-inner { border-left: 6px dashed transparent; border-right: 6px dashed transparent; border-top: 7px solid #fff; left: -6px; top: -9px; position: absolute; } .a{ display: block;width:0;height:0; border-left: 7px dashed transparent; border-right: 7px dashed transparent; border-top: 8px solid green; border-bottom: 0; position: absolute; } .b{ position: absolute; border-left: 6px dashed transparent; border-right: 6px dashed transparent; border-top: 7px solid #fff; top: -9px; left: -6px; } </style> </head> <body> <p class="wrap"> <h2>用CSS实现带缺口的提示框</h2> <span class="a"> <span class="b"></span> </span> <br/> <span class="a"> <span class="b" style="top:-11px;"></span> </span> <br/> <span class="ui-slider-tooltip ui-corner-all"> <span>带缺口提示框</span> <span class="ui-tooltip-pointer-down"> <span class="ui-tooltip-pointer-down-inner" ></span> </span> </span> <br/> <span class="ui-slider-tooltip ui-corner-all" style="background: #f00"> <span>加个背景就可以看清原理啦</span> <span class="ui-tooltip-pointer-down"> <span class="ui-tooltip-pointer-down-inner" ></span> </span> </span> </p> </p> </body> </html>其实就是利用宽度高度为0的box，设置border,得到想要的三角形，通过三角形的叠加显示制作出箭头的效果~
感谢各位的阅读！看完上述内容，你们对css怎么实现箭头和带缺口提示框大概了解了吗？希望文章内容对大家有所帮助。如果想了解更多相关文章内容，欢迎关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
