加拿大快8官网:Css:after伪元素【简单】写对话框箭头

加拿大快乐8走势图 www.sn89e.com.cn 2018-09-15 PM 02:09.来自互联网

(阅览)Read 1836

(调整字号)Size

16px 14px 12px

第一次写对话框的箭头时,也是一头雾水,不知道怎么去写,后来去学习了一下别人怎么写的,也曾经试过去用别人的代码,但是去修改箭头长度和宽度的时候总是很难,然后就自己去研究,发现了一种全新的写法,自我感觉还是挺简单的,最重要的是这样写可以去控制箭头的长短和宽度,这样在其他地方用的时候,也更加容易修改。



先是一个随意的 DIV ,可以根据自己的需要加在自己想样用到的地方,然后通过他的伪类:after添加content,三角形的形状是通过它的四个方向的边框去实现的,其中三个方向的边框设置颜色为透明。


例如我这个是向下的箭头,可以通过border-leftborder-right的宽度来改变箭头的宽度,左右两个边框的宽度差可以去控制箭头的偏向,向下的箭头,就设置boorder-bottom的宽度为0,通过border-top的边框宽度去改变箭头的长短。最后通过定位把它放在DIV的下面就行了。


下面是效果图:



0371/8622 0001

weekdays :   -am. 09:00-11:30
-pm.14:00-18:30 Open Hours

中国郑州 郑东新区金水东路与中兴路交汇处楷林IFC /A座 -17F-1713

Room1713 Building A,Kineer IFC,JinShui East Rd.
Zhengdong New Area,Henan,China

  • 第五届自治区道德模范风采 2018-12-13
  • 想家了!红红火火迎新年 青城呼和浩特年味十足 2018-12-12
  • 17个最难认的汉字!最后一个输入法都打不出来 2018-12-11
  • 达索系统3D体验高峰论坛暨广州智能制造大会召开 2018-12-10
  • 人人都有劣根性。精英群体利用大多数人的劣根性实现私利很合理,对么? 2018-12-09
  • 张瑜的专栏作者中国国家地理网 2018-12-08
  • 【学习时报】新发展理念是习近平经济思想的灵魂 2018-12-08
  • 150块地铁灯牌高调“炫父” 温暖南京城 2018-12-07
  • 紫光阁中共中央国家机关工作委员会 2018-12-07
  • 3898元起vivo NEX发布:升降式前置镜头,正面全是屏幕 2018-12-06
  • 西南华南等地将有较强降水 东北华北有对流性天气 2018-12-06
  • 回复@笑傲江湖V:7000 2018-12-05
  • 女子在自家院子乘凉 被后山滚落千斤巨石砸死 2018-12-05
  • 翰墨飘香迎新春 全国书画名家作品展亮相郑州 2018-12-04
  • 这里把贫困搬迁户当成“宝” 河北灵寿县的扶贫新探索 2018-12-03
  • 297| 450| 584| 77| 389| 172| 587| 702| 592| 419|