分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

纯CSS实现tooltip提示框,CSS箭头及形状之续篇--给整个tooltip提示框加个边框

发布时间:2023-09-06 01:57责任编辑:蔡小小关键词:CSS

纯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

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved