css简单实现带箭头的边框
css简单实现带箭头的边框
普通边框
<style>
.border {
width: 100px;
height: 50px;
border: 1px solid red;
}
</style>
<div class="border"></div>
实现由四个三角形组成的正方形
<style>
.triangle {
width: 0;
height: 0;
border: 100px solid red;
border-right-color: green;
border-left-color: blue;
border-top-color: black;
}
</style>
<div class="triangle"></div>
向下三角形
<style>
.triangle-bottom {
width: 0;
height: 0;
border: 100px solid transparent;
border-top-color: red;
}
</style>
<div class="triangle-bottom"></div>
将左右下边颜色设置为透明 transparent,得到向下的箭头
将三角形放入边框中
<style>
.border-triangle {
width: 100px;
height: 50px;
border: 1px solid red;
position: relative;
}
.border-triangle:before {
content: "";
position: absolute;
width: 0;
height: 0;
border: 4px solid transparent;
border-top-color: red;
left: 50%;
margin-left: -4px;
bottom: -8px;
}
</style>
<div class="border-triangle"></div>
将三角形设置为绝对定位,利用margin-left和left 定位到元素中间,bottom设置-8px,靠近边框底部居中
带箭头的边框
<style>
.border-triangle-bottom {
width: 100px;
height: 30px;
border: 1px solid #1d9cd6;
position: relative;
border-radius: 4px;
}
.border-triangle-bottom:after,
.border-triangle-bottom:before {
content: "";
position: absolute;
width: 0;
height: 0;
border: 4px solid transparent;
border-top-color: #1d9cd6;
left: 50%;
margin-left: -4px;
bottom: -8px;
}
.border-triangle-bottom:after {
border-top-color: #fff;
bottom: -7px;
}
</style>
<div class="border-triangle-bottom"></div>
将边框颜色换成好看的蓝色,将before和after伪元素都设置为绝对定位,定位到边框底部剧中,将after伪元素设置成白色,底部偏移量大于before 1px,遮住三角形底部的颜色。这样一个好看的箭头边框就实现了
css简单实现带箭头的边框的更多相关文章
- css实现横向带箭头步骤流程效果
通过纯css实现圆角的步骤流程效果,扩展性强,可以随意增加减少数量,兼容性ie6+. 具体代码: <style type="text/css"> ul{margin:0 ...
- css实现带箭头选项卡
这阵子在做一个web端项目中遇到一个问题,需要实现带箭头的选项卡点击可切换.起初没想太多,直接切一个向上的小箭头图片,外层div设置相同颜色的边框,再用相对定位和绝对定位.这种方法是可行的,但是因为手 ...
- div+css实现圆形div以及带箭头提示框效果
.img{ width:90px; height:90px; border-radius:45px; margin:0 40%; border:solid rgb(100,100,100) 1px;& ...
- 圆角带箭头的提示框css实现
css是一个很强大的东西,很多网页效果,我们可以通过css直接实现.今天给大家分享的是一个用css实现的圆角带箭头的提示框. 效果如下图: 这一个样式主要涉及到了css的边框样式border的运用和定 ...
- div+css制作带箭头提示框效果图(原创文章)
一直都在看站友们的作品,今天也来给大家分享一个小的效果,第一次发还有点小紧张呢,语言表达能力不是很好,还请见谅…^ 先来个简单点的吧,上效果图 刚开始在网上看到效果图的时候感觉好神奇,当我试着写出来的 ...
- CSS实现带箭头的提示框
我们在很多UI框架中看到带箭头的提示框,感觉挺漂亮,但是之前一直不知道其原理,今天网上找了些资料算是弄清楚原理了: 先上效果图: 原理分析: 上面的箭头有没有觉得很像一个三角形,是的,它就是三角形:只 ...
- 使用纯CSS实现带箭头的提示框
爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...
- 【荐】CSS实现漂亮实用带箭头的流程图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 用css制作一个三角形箭头
剑走偏锋——用css制作一个三角形箭头 通常,我们做上图那个三角形,一般都是做张图,而且需要两张,因为一般都是下拉菜单的效果,需要有个hover的样式,箭头是反的.那是不是有更好的办法呢,毕竟要用 ...
随机推荐
- centos6.9 安装mysql8
centos6.9 安装 mysql8 # 安装mysql8 1.下载https://cdn.mysql.com//Downloads/MySQL-8.0/mysql-8.0.16-2.el6.x86 ...
- vue使用笔记一
1.vue-cli安装 sudo npm install -g @vue/cli 2.查看是否安装成功 vue --version 3.创建项目 vue create hello-world 4.启动 ...
- 【监控笔记】【1.3】监控事件系列——SQL Trace(黑盒跟踪 BlackBox Trace)
[1]它跟踪了哪些事件? (1.1)存储过程执行(SP:Strating) (1.2)T-SQL执行(SQL:BatchString) (1.3)错误和警告(Exception,Attention) ...
- PostgreSQL设计之初的大量论文
引自:https://www.docs4dev.com/docs/zh/postgre-sql/11.2/reference/biblio.html#STON86 该网站是一个PostgreSQL手册 ...
- 消息中间件 JMS入门
1. JMS入门 1.1消息中间件 什么是消息中间件 消息中间件利用高效可靠的消息传递机制进行平台无关的数据交流,并基于数据通信来进行分布式系统的集成.通过提供消息传递和消息排队模型,它可以在分布式环 ...
- P1067多项式输出
这道题是2009普及组的题,仍然是一个字符串+模拟.(蒻到先不刷算法) 这道题的题干给了很多的提示,也很全面,但是当我把种种情况都考虑到了后,在写代码的过程中仍然出现了很多的错误,wa了三四次.其实导 ...
- mac键盘在ubuntu下开启fn功能按键
转载:http://wiki.ubuntu.org.cn/UbuntuHelp:AppleKeyboard Change Function Key behavior This section of t ...
- 【问题解决方案】git仓库重构
Linux mv命令 用来为文件或目录改名.或将文件或目录移入其它位置. 语法 mv [options] source dest mv [options] source... directory 注: ...
- vue项目1-pizza点餐系统10-axios实现登陆
一.登陆思路 从数据库中拿到数据,每个用户信息都是一个对象,需要用数组存储对象信息,然后对比输入的用户信息,如果匹配成功就跳转到home主页,否则提示用户或密码错误. 二.具体操作 1.导入axios ...
- 6.css3定位--position
⑴Static默认值,没有定位. ⑵Absolute绝对定位.后面的元素会补上原来偏移的位置. ⑶Relative相对定位.后面的元素不会补上原来偏移的位置. ⑷Fixed绝对定位.相对于浏览器窗口固 ...