标签：back bottom border mil inf class idt nbsp charset
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Test</title> <style> .tip { position: relative; background-color: deepskyblue; margin: 20px auto; width: 246px; height: 43px; line-height: 43px; color: white; text-align: center; border-radius: 10px; font-family: sans-serif; } .tip:after { content: ""; position: absolute; width: 0; height: 0; border: 8px solid; } .top:after { border-bottom-color: deepskyblue; left: 50%; bottom: 100%; margin-left: -15px; } .right:after { border-left-color: deepskyblue; left: 100%; top: 50%; margin-top: -7px; } .bottom:after { border-top-color: deepskyblue; top: 100%; left: 50%; margin-left: -15px; } .left:after { border-right-color: deepskyblue; top: 50%; right: 100%; margin-top: -9px; } </style> </head> <body> <div class="tip top">top</div> <div class="tip bottom">bottom</div> <div class="tip left">left</div> <div class="tip right">right</div> </body> </html>
标签：back bottom border mil inf class idt nbsp charset
原文地址：https://www.cnblogs.com/liujinyu/p/13037492.html
