博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
来自网易云的黑科技,带尖角的div......
阅读量:5341 次
发布时间:2019-06-15

本文共 654 字,大约阅读时间需要 2 分钟。

今天在网易云的网页版听歌,话说Steve Vai的曲子永远是这么让人揣摩不透,不过我还时更喜欢老Joe,咦,跑题了···

 

大家可以看到评论输入框和回复框,上面都有个小尖角,实现的方式有很多,我一般是用border来做,只要给一个元素加上这四条属性就行了:

border-top: 400px solid red;   border-right: 400px solid transparent;   border-bottom: 400px solid transparent;   border-left: 400px solid transparent;

下面要讲的是网易云上面的黑科技,我看完真的是服···

作为一个程序猿,看网页总喜欢手贱的审查元素...

 

咦?这两个小黑块是啥?稍微一想,原来是这样....

顶层的小方块颜色是白色背景颜色,下面还层叠了一个背景颜色为边框颜色的小方块,还是上图比较直观:

这里有两个小方块,我们两个小方块都position:absolute;把右边的小方块向左移,移到马上覆盖左边方块为止:

OK,就像这个样子,聪明的你可能已经知道这个是什么了,假定背景颜色是白色的,边框是红色的,那我们只需要改变着两个元素的color属性即可:

我们只需给父元素position:relative;把这两个小方块定位到相应的地方就OK啦,感觉能想到这种方法的人也挺牛的,啊哈。

转载于:https://www.cnblogs.com/chinajins/p/5607135.html

你可能感兴趣的文章
环境配置
查看>>
Linux基础学习
查看>>
SQL Server数据库的存储过程中定义的临时表,真的有必要显式删除(drop table #tableName)吗?...
查看>>
Android 常见的工具类
查看>>
Linux的系统级性能剖析工具-perf
查看>>
改变FileUpload文件上传控件的显示方式,确认后上传
查看>>
二维码Java和Jquery生成方式
查看>>
分支结构
查看>>
Servlet 总结
查看>>
kotlin学习一:kotlin简介
查看>>
virut详细分析
查看>>
单片机八位时钟
查看>>
c# webrower 页面跳转事件
查看>>
后缀数组一·重复旋律
查看>>
基于jquery后台框架设计(自适应高度,iframe简易版)
查看>>
零门槛,包教会。让你在5分钟内使用以太坊ERC20智能合约发行属于自己的空气币...
查看>>
shimano 型号详解 (zz)
查看>>
PUSH的整体设计
查看>>
一个去除内容空白的正则
查看>>
小白:virtualBOx安装Ubuntu16.04->初始化->镜像备份
查看>>