CSS如何实现小箭头及模拟微信对话框样式

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>CSS箭头</title><style>.step1 {width: 30px;height:30px;margin-bottom: 20px;border-width:20px;border-style:solid;border-color:#e66161 #f3bb5b #94e24f #85bfda;}.step2 {width: 0px;height:0px;margin-bottom: 20px;border-width:20px;border-style:solid;border-color:#e66161 #f3bb5b #94e24f #85bfda;}.step3{width: 0px;height:0px;margin-bottom: 20px;border-width:20px;border-style:solid;border-color: transparent;border-top-color: #e66161;}.test-step{position: relative;margin-left:20px;margin-bottom: 20px;padding: 5px;width:150px;height: 25px;line-height: 25px;border:0px solid black;border-radius:5px;background: rgba(245,245,24,1)}.test-step:before {content: "";display: block;position: absolute;width:0;height: 0;border: 10px solid transparent;  /*边框宽度为10px 颜色透明（也就是隐藏） */border-right-color: rgba(245,245,24,1); /*只显示右边的边框 显示效果就是向左的箭头*/left: -20px;  /*在DIV左边显示右边的边框 要向左移动2倍边框宽度 即20px*/top: 9px;   /*高度为25+5+5=35 排除箭头高度20 剩余15 显示在距顶部9px的位置 */}.test-step1{position: relative;margin-left:20px;padding: 5px;width:150px;height: 25px;line-height: 25px;border:1px solid black;border-radius:5px;background: rgba(245,245,24,1)}.test-step1:before {content: "";display: block;position: absolute;width:0;height: 0;border: 10px solid transparent;border-right-color: black;left: -21px;top: 9px;}.test-step1::after {content: "";display: block;position: absolute;width:0;height: 0;border: 10px solid transparent;border-right-color: rgba(245,245,24,1);left: -20px;top: 9px;}</style>
</head>
<body>
<div class="container" id="app"><!-- 一步步显示来查看CSS小三角产生的原理 --><div class="step1"></div><div class="step2"></div><div class="step3"></div><div class="test-step">模拟微信对话框</div><div class="test-step1">模拟带边框的对话框</div>
</div></body>
</html>

备注说明：如input这样不能包含子元素的标签是不支持::after 这样的伪元素的。

CSS如何实现小箭头及模拟微信对话框样式相关推荐

前端 css 鼠标自定义小箭头
最近想把鼠标小箭头替换掉,由于设及图片太多,js写不出来,于是找到了简单的css cursor: url('../img/logo.png'), auto 是的没错,就是这么简单
android+实现微信对话框样式,实现微信对话框的图片样式
不知道大家有没有注意到,微信里面,我们聊天的时候,发文字和发图片的时候,气泡对话框样式是有所不同的.有啥不同呢?且看下图. Paste_Image.png 可以看到,发图片的时候,气泡对话框箭头的背景 ...
android+实现微信对话框样式,实现微信对话框的图片样式以及图片边框
| 微信会话框细心的前端们会发现如果你在微信里发一张和你当前背景一样的图片,那么微信的会给这张图片加边框,并且,右边的小三角是根据图片的位置截取的.很多前端会用backgroud或者clip- ...
微信小程序相机组件wx.createCameraContext()的使用模拟微信拍照-后端为nodejs
在本文微信小程序相机组件wx.createCameraContext()的使用模拟微信拍照之前需要看看微信小程序-获取用户session_key,openid,unionid - 后端为nodej ...
windows模拟微信小程序_Windows 版微信新版本内测！小程序可以直接添加到电脑桌面了...
微信小程序在手机端的体验已经非常流畅了.手机端小程序入口多,用户对应该在哪里找到小程序,怎样关闭小程序,怎样搜索小程序等问题都已经养成了自己的使用习惯.但换到电脑端来看,一切就全然不同. 「你收到了一 ...
html中怎么写小箭头,HTML+CSS入门 CSS用伪类制作小箭头
本篇教程介绍了HTML+CSS入门 CSS用伪类制作小箭头,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 本文对轮播图左右按钮的处理方法一改往常,不是简单地用btn.pr ...
已被多次定制！！“模拟微信答题的H5小游戏
今天推荐一款"模拟微信"答题的H5小游戏,这个也是涛舅舅这边客户定制的最多的一款游戏,曾经为现代汽车.万达.和<三妹>电视剧都作过定制! 以下是<三妹>定制 ...
C语言实现小游戏——模拟微信小游戏《最强飞刀手》
C语言实现小游戏--模拟微信小游戏<最强飞刀手> 曾经玩过的微信小游戏,想着用C语言实现,只可惜,下图是我的上限. 这个下游戏界面简陋,把旋转的西瓜做成了平的接盘:实现的功能有:接盘的移动 ...
day07项目切图规范、常见的图片格式和特点、CSS精灵、 CSS小箭头、BFC、阿里矢量图标
文章目录 day07 项目切图规范 PS常用工具常见的图片格式和特点 CSS精灵 CSS小箭头 BFC (Block Formatting Context) 块级格式化上下文阿里矢量图标 day0 ...

CSS如何实现小箭头及模拟微信对话框样式

CSS如何实现小箭头及模拟微信对话框样式相关推荐

最新文章

热门文章