纯CSS实现tooltip提示框,CSS箭头及形状之续篇--给整个tooltip提示框加个边框
学习了:https://blog.csdn.net/u012688910/article/details/41856895
源码膜拜:
<body> ???<div class="demo"></div></body>
.demo{ ???????????????background-color: gray; ???????????????height: 100px; ???????????????position: relative; ???????????????width: 100px; ???????????border:2.75px solid red; ???????????} ???????.demo:after,.demo:before{ ???????????content:‘‘; ???????????position:absolute; ???????} ???????.demo:after{ ???????????//height:20px; ???????????//width:20px; ???????????//background:yellow; ???????????//border:10px ?solid lightgreen; ???????????border:10px ?solid transparent; ???????????border-top-color:gray; ???????????top:100px; ???????????left:20px; ???????} ???????????????????.demo:before{ ???????????//height:30px; ???????????//width:30px; ???????????//background:green; ???????????//border:15px solid red; ???????????border:15px solid transparent; ???????????border-top-color:red; ???????????top:100px; ???????????left:15px; ???????} ???
纯CSS实现tooltip提示框,CSS箭头及形状之续篇--给整个tooltip提示框加个边框
原文地址:https://www.cnblogs.com/stono/p/9128269.html