程序博客网 > 淘宝引流是什么意思

用css伪类实现提示框效果

来源：互联网发布：淘宝引流是什么意思编辑：程序博客网时间：2024/06/05 15:42

题目要求用css实现下图效果：

很明显难点就在那个多出去的三角形上，下面代码是用一个div来实现的，用到了伪类 : befor和 : after，使用这两个伪类活生生的在div之前和之后多出了“那么点东西”，然后设置其边框，形成一黑色三角形，在用after造出另一白色三角形，让白色三角形位置向后移动，正好流出黑色三角形边框：

<!DOCTYPE HTML><html><head><meta charset="utf-8" /><title>testcss</title><style>#demo{  width: 100px;  height:100px;  border:2px solid #000;}#demo:before{  content:'';  display: block;  width: 1px;  height:1px;  position: relative;  top:20px;  left:100px;  border-left: 20px solid #000;  border-top:15px solid transparent;  border-bottom:15px solid transparent;}#demo:after{  content:'';  display: block;  width: 1px;  height:1px;  position: relative;  top:-11px;  left:97px;  border-left: 20px solid #fff;  border-top:15px solid transparent;  border-bottom:15px solid transparent;}</style><script type="text/javascript">window.onload=function(){}</script></head><body>  <div id='demo'></div></body></html>

0 0

淘宝引流是什么意思

淘宝引流是什么意思

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子帽子被压变形了怎么办开水把衣服皱了怎么办衣服被热水烫皱怎么办开水烫皱了衣服怎么办衣服被热水烫了怎么办衣服让热水烫了怎么办衣服高温烫皱了怎么办网纱静电卷起来怎么办裙子上的纱卷了怎么办裙子的边往上卷怎么办秋款裙子卷边了怎么办真丝衣服用肥皂洗了怎么办粘纤面料水洗了怎么办考研没动力怎么办知乎考研看不进去书怎么办清道夫没吃的了怎么办金毛身上起疙瘩怎么办狗身上起红疙瘩怎么办泰迪身上有皮屑怎么办人传染了狗癣怎么办比熊身上长癣了怎么办狗皮肤病传染人怎么办狗身上的蜱虫怎么办狗狗身上长癣怎么办松狮身上长癣怎么办小狗狗身上长癣怎么办狗癣传染人了怎么办狗狗螨虫传染人怎么办金毛身上有虱子怎么办金毛幼犬有跳蚤怎么办狗狗身上有跳蚤怎么办? 狗跳蚤到人身上怎么办狗咬了伤口肿了怎么办狗爪子抓破出血怎么办杜宾身上有皮屑怎么办金毛身上有皮屑怎么办被窝有鸡油子虫怎么办泰迪身上有虱子怎么办狗身上长吸血虫怎么办狗狗身上有虫怎么办狗狗耳朵有螨虫怎么办