css倒三角制作,多用于对话框

瘦欲@ 提交于 2019-12-04 18:42:23

 

 这样的对话框经常看见,今天复习js做练习题的时候也遇到了,刚好直接解决这个css的问题。这个三角形看起来很复杂,但是知道怎么做后觉得很简单。

一、制作小三角形的原理:

    利用width、height等于0然后利用边框填充颜色,就可以得到小三角形。下面是分解三角形的最初模型,这样拿到三角形之后只需要设置以下样式就得到了

 

二、设置样式

  设置好样式让小三角形看起来是连在一起的。下面是一个div很简单的设置,最后用伪类给小三角形装饰一下。

 

然后给这个class用伪类设置,我这里使用的是after

 

 

 

 

 这样就简单的拿到了对话框似的倒三角!!!

 

 

 

 

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!