css透明输入框(纯CSS实现气泡对话框尖角处理方案)
类别:Web前端 浏览量:2442
时间:2022-01-26 01:37:49 css透明输入框
纯CSS实现气泡对话框尖角处理方案先来看一下效果图:
简单粗暴上代码:
html:
<li class="dialog-box"> <span class="bot"></span> <span class="top"></span> </li>
less:
.dialog-box { position: relative; span { width:0; height:0; font-size:0; overflow:hidden; position:absolute; &.bot{ border-width: 15px; border-style: solid dashed dashed; border-color: transparent transparent #F9743A transparent; left: 15px; top: -29px; } &.top{ border-width:13px; border-style:solid dashed dashed; border-color:transparent transparent #fff transparent; left:17px; top:-25px; } } }
大白话讲解:
如果你想要其他方位的尖角,就调整boder-color的顺序(上,右,下,左)。
主要的原理大概是有两个一样形状,比例不同的小三角,一个和底色一样的实心三角bot,一个白色底的top,并且top是会盖在bot上面的,然后调整它们的大小(一般来说实心要比白色块大一点,这样才可以显示出有眼色的边边啊)。
最后想尽一切办法让它们重合(白色的top在上面,实心的bot在下面),最后通过调整绝对定位的参数(left,top)让其重合的天衣无缝。好了,大功告成啦,不知道你get到了没有?
热门推荐
- phpstudy最佳配置(phpstudy如何开启openSSL?)
- localstorage可以存多少(解决localstorage存储boolean类型值的小坑)
- python怎么取出列表(Python 利用切片从列表中取出一部分使用的方法)
- apache服务器设置301(Apache Rewrite实现URL的301跳转和域名跳转)
- mysql8.0.16安装步骤图解(mysql 8.0.22 安装配置图文教程)
- phpstudy默认不支持64位php的解决方法(phpstudy默认不支持64位php的解决方法)
- mysql索引面试总结(Mysql数据库索引面试题程序员基础技能)
- css样式功能表能兼容所有浏览器吗(比较全的CSS浏览器兼容问题整理总结)
- python取当前日期(Python实现根据日期获取当天凌晨时间戳的方法示例)
- docker容器卡死(Docker容器不识别宋体等字体的解决方案)