`

css -> 弹出带 小三角箭头的 图层

 
阅读更多

 

原理是 给 元素 设置 position:relative;

然后给元素的:after , :before 设置显示样式 并 position:absolute 

 

<div id="demo"></div>

<style>
#demo {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  position: relative;
  border: 4px solid #333;
}

#demo:after, #demo:before {
  border: solid transparent;
  content: ' ';
  height: 0;
  left: 100%;
  position: absolute;
  width: 0;
}

#demo:after {
  border-width: 9px;
  border-left-color: #ccc;
  top: 15px;
}

#demo:before {
  border-width: 14px;
  border-left-color: #333;
  top: 10px;
}
</style>

 


 

************   箭头向上 --------------

<div id="demo"></div>

<style>
#demo {
  width: 100px;
  height: 100px;
  margin-top:50px;
  background-color: #ccc;
  position: relative;
  border: 4px solid #333;
}

#demo:after, #demo:before {
  border: solid transparent;
  content: ' ';
  height: 0;
  position: absolute;
  width: 0;
}

#demo:after {
  border-width: 9px;
  border-bottom-color: #ccc;
  top: -18px;
  left:35px;
}

#demo:before {
  border-width: 14px;
  border-bottom-color: #333;
  
  left: 30px;
  top: -30px;
}
</style>

 



 
 

 

  • 大小: 595 Bytes
  • 大小: 634 Bytes
分享到:
评论

相关推荐

    css3-弹出窗口弹出效果

    本主题聚焦于“css3-弹出窗口弹出效果”,这涉及到网页交互设计中的一个重要方面,即如何通过CSS3实现吸引用户的动态提示或信息展示。弹出窗口在网页设计中广泛应用于消息提示、登录框、模态对话框和广告展示等场景...

    sweetalert 手机弹出框

    &lt;!-- 弹出框 --&gt; &lt;link rel="stylesheet" href="__PUBLIC__/css/sweetalert.css"&gt; &lt;!-- 弹出框 --&gt; &lt;script type="text/javascript" src="__PUBLIC__/wxparent/js/sweetalert-dev.js"&gt;&lt;/script&gt; ...

    Bootstrap ACE后台管理模板

    -- basic styles --&gt; &lt;link href="assets/css/bootstrap.min.css" rel="stylesheet" /&gt; &lt;link rel="stylesheet" href="assets/css/font-awesome.min.css" /&gt; &lt;!--[if IE 7]&gt; ...

    AutoCode代码生成器【SSH版】

    页面美工 --&gt; 页面按钮样式及CSS样式文件 生成的代码直接拷贝到MyEclipse里,做简单设置,发布后即可运行! 最多3分钟的生成过程,一次生成,全程无忧! 更有9组页面按钮,6套页面样式供您选择,灵活的SSH架构、...

    sublime插件HTML-CSS-JS Prettify

    **安装Package Control后,打开Sublime Text并按下`Ctrl+Shift+P`(Windows/Linux)或`Cmd+Shift+P`(Mac),在弹出的命令面板中输入"Install Package"并选择"Package Control: Install Package"。接着,一个新窗口...

    jquery-css3-弹出框

    "jQuery CSS3 弹出框"是指使用JavaScript库jQuery和CSS3技术实现的弹出框效果。这种弹出框通常具有良好的用户体验,因为它可以提供动态过渡、自定义样式以及与页面其他元素的无缝集成。接下来,我们将深入探讨如何...

    带动画效果jQuery+CSS3实现的弹出框弹出层效果

    本文将深入探讨如何使用jQuery和CSS3来创建一个带有动画效果的弹出框弹出层,以及其核心组件和实现原理。 首先,jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax交互。在本项目...

    photoshop转CSS3插件

    Adobe Photoshop 中检查"窗口-&gt; 扩展-&gt; CSS3Ps"菜单项。 恭喜 !现在,您可以选择您的图层和生成该涂层对应的 CSS。 使用 Photoshop CS3 和 CS4 中的脚本 选择您想要转换的图层 选择"文件-&gt; 脚本-&gt; 浏览..."菜单项...

    css三角箭头

    纯CSS三角箭头,不用图片的。收集于互联网,只为兴趣与学习交流,不作商业用途

    基于animate.css弹出框弹出关闭特效 (5星级)

    "基于animate.css弹出框弹出关闭特效"是一个典型的使用场景,它可以提升用户界面的交互性和吸引力。 在这个5星级的教程中,作者展示了如何利用animate.css来实现弹出框的弹出和关闭效果。首先,我们需要在HTML文件...

    div+css布局制作横向带箭头步骤流程样式

    `div+css`布局能够实现灵活、可维护的网页设计,对于创建横向带箭头的步骤流程展示尤为适用。以下是制作此类布局的具体步骤和相关知识点: 1. **创建HTML结构**:首先,我们需要用`&lt;div&gt;`元素来表示每个步骤,每个...

    纯CSS实现div弹出对话框

    纯CSS实现div弹出对话框 可以应用于C#,.net 里面。 页面比较好看。

    vant.min.js/css

    -- 引入 vant.css --&gt; &lt;link rel="stylesheet" href="index.css"&gt; &lt;/head&gt; &lt;body&gt; &lt;!-- 页面内容 --&gt; &lt;/body&gt; &lt;/html&gt; ``` 使用这种方式将 Vant 的 CSS 和 JS 文件导入 HTML 项目,可以避免直接使用 CDN 链接带来...

    css小三角的做法与使用

    这个“css小三角的做法与使用”主题深入探讨了如何仅通过CSS来创建各种形状的三角形,并且提供了文本文档和图解以帮助学习者理解。 首先,我们要了解CSS中如何创建三角形的基本原理。这是因为CSS边框不只可以是矩形...

    纯div+css制作的弹出菜单-01

    在网页设计领域,纯div+css制作的弹出菜单是一种常见的交互元素,它允许用户通过鼠标悬停或点击主菜单项来展示下级菜单。这种技术不仅提供了良好的用户体验,还能帮助优化页面性能,因为它不依赖JavaScript或其他...

    详解CSS3 用border写 空心三角箭头 (两种写法)

    在CSS3中,创建空心三角箭头是一个实用的技巧,尤其在构建用户界面或布局时。本篇文章将详细介绍如何利用border属性来实现这一效果,包括两种不同的方法。 ### 第一种写法:利用伪元素 `::before` 或 `::after` 在...

    div+css制作的弹出菜单

    本篇将详细讲解如何使用`div+css`制作弹出菜单。 一、理解`div`与`CSS` 1. `div`元素:`&lt;div&gt;` 是一个通用容器元素,没有特定的含义,但可以容纳其他HTML元素。通过CSS,我们可以对`div`设置宽度、高度、背景色、...

    ckplayer视频播放器插件(Java)

    //弹出层播放视频 function play(url) { $("#popboxs").css("display",false); $("#bg").css("display",false); var flashvars={ f:url, c:0, b:1 }; var params={bgcolor:'#FFF',...

    CSS3实现带阴影边框效果弹出窗口

    【标题】:“CSS3实现带阴影边框效果弹出窗口”是现代网页设计中一种常见的交互体验技术。这种效果使得用户在点击某个元素时,一个带有阴影边框的弹出窗口会在网页中央出现,通常用于展示图片、内容详情或者表单填写...

    jquery弹出div图层(带蒙板)

    本文将深入探讨如何使用jQuery实现一个弹出的div图层,并结合蒙版效果,创建一种常见的对话框功能。这个功能常用于显示警告、确认消息或者承载表单等互动元素。 首先,`jquery-1.3.2.min.js`是jQuery库的压缩版本,...

Global site tag (gtag.js) - Google Analytics