用css伪类实现提示框效果

最新推荐文章于 2021-04-22 16:49:47 发布

我的前端学习笔记

最新推荐文章于 2021-04-22 16:49:47 发布

阅读量747

点赞数

分类专栏：技术文章标签： css 伪类

本文链接：https://blog.csdn.net/u012181244/article/details/41123695

版权

技术专栏收录该内容

39 篇文章 0 订阅

订阅专栏

题目要求用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.οnlοad=function(){
}
</script>
</head>
<body>
  <div id='demo'></div>
</body>
</html>