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的样式,箭头是反的.那是不是有更好的办法呢,毕竟要用 ...
随机推荐
- windows系统IO性能测试
关键词:sql server io测试 下载链接:http://www.onlinedown.net/soft/57364.htm CrystalDiskMark(硬盘检测工具),一个测试你的硬盘或者 ...
- MySQL数据库的特点和优势
MySQL数据库的特点和优势: 1.MySQL性能卓越.服务稳定,很少出现异常宕机. 2.MySQL开放源代码且无版权制约,自主性及使用成本低. 3.MySQL历史悠久,用户使用活跃,遇到问题可以寻求 ...
- 线性表源码分享(c++),包含顺序表、单链表、循环链表、双向链表
---恢复内容开始--- 我是一个c++和数据结构的初学者,本文主要是把清华大学出版社的数据结构(用面向对象方法与c++语言描述)(第2版)这本书中第二章线性表的源码抄下来,在学习的过程中有助于加深印 ...
- django中配置MySql
1.配置字段 在setting文件中配置数据库字段:数据库需要提前手动创建好:语句(create database testdb charset "utf8";) DATABASE ...
- css控制文本内容显示省略号
1,单行文字显示省略号 div{ width:200px; overflow:hideen; white-space:nowrap; text-overflow:ellipsis; } 2,多行文字显 ...
- CentOS7.6中 KVM虚拟机内存、CPU调整
CentOS7.6中 KVM虚拟机内存.CPU调整 一.调小虚拟机内存 调小虚拟机内存可以动态实现,不用关机 1.查看当前内存大小 [root@heyong kvm]# virsh dominfo t ...
- Java全排列递归算法
Java全排列算法: 第一遍循环:将list数组index==0的元素依次与数组的每个元素交换,从而保证index==0的位置先后出现n个不同元素之一,实现对index==0位置的遍历. 第 i 遍循 ...
- 统计学习方法——第二章的c++实现
1.东西搞丢了,只写一部分 2.算法那收敛性 证明逻辑: a.γ是yi*(wopt*Xi)最小值 b.R是Xi最小值 c.k<=(R/γ)^2 难打公式,直接说,Wk由Wk-1迭代而来,所以事实 ...
- GUI学习之二十二——QRubberBand学习总结
今天学习一种全新的输入控件——QRubberBand()控件(橡皮筋选中) 一.描述 QRubberBand()提供了一个矩形或西安来只是选择或边界的效果(就像在桌面上点击鼠标后拖拽拉出来的框一样), ...
- php 强制类型转换
123 123.01 array("123",123) true false null (string) "123" "123.01" ...