纯CSS画三角形（带边框）
实例一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.find-div-body{
position: relative;
top:30px;
right:0px;
width:400px;
height:200px;
padding:8px;
background-color: #FFFFFF;
border: #cccccc solid 1px;
border-radius: 3px;
}
.find-div-body:before{
box-sizing: content-box;
width: 0px;
height: 0px;
position: absolute;
top: -16px;;
right:41px;
padding:0;
border-bottom:8px solid #FFFFFF;
border-top:8px solid transparent;
border-left:8px solid transparent;
border-right:8px solid transparent;
display: block;
content:'';
z-index: 12;
}
.find-div-body:after{
box-sizing: content-box;
width: 0px;
height: 0px;
position: absolute;
top: -18px;;
right:40px;
padding:0;
border-bottom:9px solid #cccccc;
border-top:9px solid transparent;
border-left:9px solid transparent;
border-right:9px solid transparent;
display: block;
content:'';
z-index:10
}
</style>
<body>
<div class="find-div-body">
</div> </body>
</html>
实现的效果如下图：
实例二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.find-div-body{
position: relative;
top:30px;
left: 100px;
width:400px;
height:200px;
padding:8px;
background-color: #FFFFFF;
border: #cccccc solid 1px;
border-radius: 3px;
}
.find-div-body:before{
box-sizing: content-box;
width: 0px;
height: 0px;
position: absolute;
top: 23px;;
left: -16px;
padding:0;
border-right: 8px solid #FFFFFF;
border-top:8px solid transparent;
border-bottom: 8px solid transparent;
border-left:8px solid transparent;
display: block;
content:'';
z-index: 12;
}
.find-div-body:after{
box-sizing: content-box;
width: 0px;
height: 0px;
position: absolute;
top: 22px;;
left: -18px;
padding:0;
border-right: 9px solid #cccccc;
border-top:9px solid transparent;
border-bottom:9px solid transparent;
border-left:9px solid transparent;
display: block;
content:'';
z-index:10
}
</style>
<body>
<div class="find-div-body">
</div> </body>
</html>
实现的效果如下图：
纯CSS画三角形（带边框）的更多相关文章
- 纯css画三角形
纯css画三角形与border元素相关 设置border的属性 width: 100px; height: 100px; border-style: solid; border-width: 100p ...
- 理解纯CSS画三角形
pure css draw a triangle code { display: inline-block; width: 300px; background-color: #E0E0E0 } .te ...
- 纯css画三角形，勾等形状
//三角形 .money-ul li.active:after { content: ""; position: absolute; bottom: 0; right: 0; bo ...
- 用纯css画个三角形
用纯css画个三角形以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- 三种纯CSS实现三角形的方法
看到像上图这样的 tip 的小三角,你会怎么办? 切个图上去?恩,不错,简单,兼容性也一级棒,不但好控制,那点小东西也增加不了多少图片的大小.但有没有更好更讲究技巧的办法呢?哈哈,那必须有啊,而且还不 ...
- CSS 魔法系列：纯 CSS 绘制三角形（各种角度）
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- 纯 CSS 实现三角形尖角箭头的实例
上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 http://blog.csdn.net/zhouzme/article/details/18901943 ,但没有怎么用上,也没有详细完整 ...
- 纯css竟可以做出边框这样长宽度的过渡效果
边框效果如下:鼠标移到下面方形,就有效果 要是没有效果,点这个:https://murenziwei.github.io/testGit/Untitled1.html 正如你所看到的,这边框颜色只 ...
- CSS学习笔记（8）--纯CSS绘制三角形（各种角度）
纯CSS绘制三角形(各种角度) CSS三角形绘制方法,学会了这个,其它的也就简单. 我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多 ...
随机推荐
- bootstrap table分页limit计算pageIndex和pageSize
由于bootstrap table的js无法直接获取pageSize和pageIndex的值,只能通过limit进行计算.
- ArcCatalog连接数据库报错
ArcCatalog连接数据库报错: Failed to connect to database. Cannot connect to database because the database cl ...
- 苹果APP内购客户付款成功，没收到相应虚拟产品的解决办法
一.引导用户走申请苹果的退款 1.告知用户新版本可以使用支付宝.微信支付,更划算 2.苹果可申请90天以内的退款,一般情况申请后48小时内就有反馈. 参考链接 https://jingyan.baid ...
- python中read()、readline()、readlines()区别
1.read([size])方法 read([size])方法从文件当前位置读取size个字节,若无参数size,则表示读取至文件结束位置,它范围为字符串对象 2.readline()方法 从字面 ...
- mysql（单表查询，多表查询，MySQl创建用户和授权，可视化工具Navicat的使用）
单表查询 语法: 一.单表查询的语法 SELECT 字段1,字段2... FROM 表名 WHERE 条件 GROUP BY field HAVING 筛选 ORDER BY field LIMIT ...
- python之tkinter入坑Pack()------（1）
tkinter 的pack()可以设置的属性如下: pack_configure(self, cnf={}, **kw)Pack a widget in the parent widget. Use ...
- C#ThreadPool类—多线程
标题:ThreadPool Class 地址:https://docs.microsoft.com/zh-cn/dotnet/api/system.threading.threadpool?redir ...
- [Dart] Manipulate Lists/Arrays in Dart
We will learn how to work with Lists using a variety of methods made available in the dart:core libr ...
- ElementUI 之 DatePicker 日期限制范围 disabledDate
需求: 时间选择器,只能选择 2000 年 - 至今的年份. <el-date-picker v-model="year" type="year" :pi ...
- B5G/6G新技术
组网技术:由自组织向自支撑发展:卫星通信(大尺度衰落)采用DTN组网. 多址技术:非正交多址:Polar-SCMA:交织多址:IDMA. 信道技术:多径分集.多普勒分集.OFDM的CP用ZP替代.设计 ...