纯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 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多 ...
随机推荐
- 转载 AI-Talking 图算法
https://mp.weixin.qq.com/s/2XRgJr-ydxHA3JxAZ_5HeA 图算法在风控业务的实践 直播行业中有很多业务风控问题,比如说批量注册.刷热度.垃圾信息以及薅羊毛等. ...
- Vue组件component创建及使用
组件化与模块化的区别 什么是组件:组件的出现,就是为了拆分Vue实例的代码量,能够让我们以不同的组件,来划分不同的功能模块 ,将来我们需要什么功能,就可以去调用对应的组件即可 组件化与模块化的不同: ...
- 虚拟机VMware安装
1.进入VMware官网,下载 (点击进入官网) 2.下载镜像文件 (点击进入官网下载) 3.下载好后,打开VMware,点击创建新的虚拟机 4.点击下一步,并找到刚才下载好的镜像文件 5.跟随系统点 ...
- Elasticsearch vs Solr 搜索引擎对比和选型
前言 全文搜索属于最常见的需求,开源的 Elasticsearch 是目前全文搜索引擎的首选. 基于Lucene它可以快速地储存.搜索和分析海量数据.维基百科.Stack Overflow.Githu ...
- Django组件之modelformset
ModelFormSet 基于modelform 实现的批量处理 前端: <form method="post" action=""> {% csr ...
- Vue中的button事件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Go 性能分析之案例一
思考 相信大家在实际的项目开发中会遇到这么一个事,有的程序员写的代码不仅bug少,而且性能高:而有的程序员写的代码能否流畅的跑起来,都是一个很大问题.而我们今天要讨论的就是一个关于性能优化的案例分析. ...
- pypython解构
*******重点 解构:把线性结构的元素解开,并按顺序的赋给其他变量 左边接纳的要与右边解开的个数一致. lst = [3,5] first,second = lst print(first,sec ...
- python线程池及其原理和使用
python线程池及其原理和使用 2019-05-29 17:05:20 whatday 阅读数 576 系统启动一个新线程的成本是比较高的,因为它涉及与操作系统的交互.在这种情形下,使用线程池可以很 ...
- 简单聊一下对MySQL索引的理解？
一.索引是什么? 索引是帮助MySQL高效获取数据的数据结构. 二.索引能干什么? 索引非常关键,尤其是当表中的数据量越来越大时,索引对于性能的影响愈发重要. 索引能够轻易将查询性能提高好几个数量级, ...