在html中使用div+css做出一个带箭头的会话框

最新推荐文章于 2022-11-04 10:46:52 发布

万迹

最新推荐文章于 2022-11-04 10:46:52 发布

阅读量992

点赞数

分类专栏：前端基础文章标签： html css

本文链接：https://blog.csdn.net/weixin_44649210/article/details/106437143

版权

前端基础专栏收录该内容

13 篇文章 1 订阅

订阅专栏

效果如图
在这里插入图片描述
代码

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
      <style>
       .big{
        /*先做一个大的正方形,注意需要给它一个相对定位,用于控制小箭头的位置*/
        width: 100px;
        height: 50px;
        background-color: red;
        position: relative;
        margin: 100px;
       }
       .sm{
        position: absolute;
        width: 0px;
        height: 0px;
        /*
         做出小箭头主要靠border的transparent属性,它的作用是使背景色隐藏。
         因为我们上面定义小正方形的宽高都是0
         下面设置了四面的边框为10px，所以只有边框占有小正方形的面积
         由于transparent隐藏背景色，如果不给某一边添加颜色时，就不会有小三角形。
         如果给四面的边框都设置颜色后,可以看到此小正方形会分成了四个小三角形，此处我们隐藏其他三边，得到一个小三角形。
         top和left为设置小三角形的位置
         */
        border:10px solid transparent;
           border-right-color:#f30; 
           /*border-bottom-color: blue;
           border-left-color: green;
           border-top-color: yellow;*/
           top:20px;
           left:-20%;
       }
      </style>
 </head>
 <body>
  <div class="big">
   <div class="sm">
    
   </div>
  </div>
 </body>
</html>

万迹

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
在html中使用div+css做出一个带箭头的会话框

效果如图代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .big{ /*先做一个大的正方形,注意需要给它一个相对定位,用于控制小箭头的位置*/ width: 100px; height: 50px; backgr
复制链接

扫一扫