摘要:效果和制作提示框相对位置,目地是使和绝对位置原点位置处于盒子幼圆相对于盒子定位上右下左提示框提示框右还是自适应的来了提示框下提示框左
效果:
</>复制代码
<span class="hljs-selector-tag">after</span>和<span class="hljs-selector-tag">before</span>制作提示框(2013<span class="hljs-selector-class">.08</span><span class="hljs-selector-class">.08</span>) - html,
- body,
- div {
- padding: 0px;
- margin: 0px;
- }
- .ts,
- .ts_right,
- .ts_bottom,
- .ts_left {
- border: 4px solid #CCC;
- position: relative;
- /*相对位置,目地是{使after和bofore绝对位置原点位置处于ts盒子}*/
- margin: 50px;
- background: #09f;
- line-height: 50px;
- padding: 0px 20px 0px 20px;
- font-size: 20px;
- font-weight: 900;
- display: inline-block;
- color: #FFF;
- font-family: "幼圆";
- }
- .ts:after,
- .ts:before,
- .ts_right:after,
- .ts_right:before,
- .ts_bottom:after,
- .ts_bottom:before,
- .ts_left:after,
- .ts_left:before {
- position: absolute;
- /*相对于ts盒子定位*/
- border: 10px solid transparent;
- content: " ";
- }
- /*上*/
- .ts:after,
- .ts:before {
- left: 50%;
- bottom: 100%;
- }
- .ts:after {
- border-bottom-color: #09f;
- border-width: 10px;
- margin-left: -10px;
- }
- .ts:before {
- border-bottom-color: #ccc;
- border-width: 16px;
- margin-left: -16px;
- }
- /*右*/
- .ts_right:after,
- .ts_right:before {
- left: 100%;
- top: 50%;
- }
- .ts_right:after {
- border-left-color: #09f;
- border-width: 10px;
- margin-top: -10px;
- }
- .ts_right:before {
- border-left-color: #ccc;
- border-width: 16px;
- margin-top: -16px;
- }
- /*下*/
- .ts_bottom:after,
- .ts_bottom:before {
- left: 50%;
- top: 100%;
- }
- .ts_bottom:after {
- border-top-color: #09f;
- border-width: 10px;
- margin-left: -10px;
- }
- .ts_bottom:before {
- border-top-color: #ccc;
- border-width: 16px;
- margin-left: -16px;
- }
- /*左*/
- .ts_left:after,
- .ts_left:before {
- right: 100%;
- top: 50%;
- }
- .ts_left:after {
- border-right-color: #09f;
- border-width: 10px;
- margin-top: -10px;
- }
- .ts_left:before {
- border-right-color: #ccc;
- border-width: 16px;
- margin-top: -16px;
- }
提示框
提示框(右)还是自适应的!
来了
提示框(下)
提示框(左)
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/53539.html
摘要:开发中,三角形的日常应用,以三角形指示箭头最为常见,其用来实现非常简单,熟悉了之后相比于引入或是背景图片会是更好更灵活的选择。这样就实现三角形了。实心三角形箭头实心三角形的原理就是一个三角形绝对定位到主体元素边界处并连接起来。 web开发中,三角形的日常应用,以三角形指示箭头最为常见,其用CSS来实现非常简单,熟悉了之后相比于引入SVG或是背景图片会是更好更灵活的选择。 而三角箭头一般...
摘要:后来知道原来可以用实现三角形,可是用过一次后很容易忘记,所以想把这个小技巧记录起来是如何实现三角形的呢答案是通过边框,也就是属性。使用CSS3实现三角形: 在前端页面中有很多时候会遇到需要三角形图案的时候,以前不知道可以用CSS3实现三角形的时候,一般都是叫UI把三角形图案切出来。 后来知道原来可以用CSS3实现三角形,可是用过一次后很容易忘记,所以想把这个小技巧记录起来~ C...
摘要:前言对于气泡对话框或者与内容连接部分会有小三角形效果,可能在以前直接用图片去实现,其实用纯即可实现,下面要实现的效果分别是微信对话框和面包屑,以此回顾记录一下。 前言 对于气泡对话框或者Popover与内容连接部分会有小三角形效果,可能在以前直接用图片去实现,其实用纯css即可实现,下面要实现的效果分别是微信对话框和面包屑,以此回顾记录一下。 效果如下: showImg(https:/...
摘要:在上一篇中,使用实现了一个全兼容的三角形图标,这个三角型图标可以使用于多种场景,比如下拉图标多级菜单等,这篇我们使用这个图标通过纯来实现一个我们常见的提示框。 [toc] 在上一篇post中,使用css实现了一个全兼容的三角形图标,这个三角型图标可以使用于多种场景,比如下拉图标、多级菜单等,这篇post我们使用这个图标通过纯css来实现一个我们常见的tooltip提示框。 最终效果图:...
摘要:在上一篇中,使用实现了一个全兼容的三角形图标,这个三角型图标可以使用于多种场景,比如下拉图标多级菜单等,这篇我们使用这个图标通过纯来实现一个我们常见的提示框。 [toc] 在上一篇post中,使用css实现了一个全兼容的三角形图标,这个三角型图标可以使用于多种场景,比如下拉图标、多级菜单等,这篇post我们使用这个图标通过纯css来实现一个我们常见的tooltip提示框。 最终效果图:...
摘要:基本原理在中,我们可以利用四个属性来绘制三角形。绘制三角形等边三角形等边三角形又称正三边形,为三边相等的三角形,其三个内角相等,均为,它是锐角三角形的一种。 简言 本文简要阐述了用CSS边框的方法在页面上绘制三角形,包括几种典型的三角形绘制,还介绍了几个简单的应用场景。利用边框绘制三角形方法只是众多方案中的一种,大家根据项目实际,选用最适宜项目的方案。 showImg(https://...
阅读 912·2023-04-26 00:30
阅读 2828·2021-11-23 09:51
阅读 1170·2021-11-02 14:38
阅读 2832·2021-09-07 10:23
阅读 2383·2021-08-21 14:09
阅读 1597·2019-08-30 10:57
阅读 1725·2019-08-29 11:20
阅读 1250·2019-08-26 13:53