纯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 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多 ...
随机推荐
- K2 BPM_当K2遇上医药，用流程打通企业的任督二脉_业务流程管理系统
据调查,如今仍有60%的医药企业,存在合规经营和利润下降的困扰,在“研”.“产”.“供”.“销”的运营过程中,时时伴随着严苛的管理政策和法规.如何加强企业跨部门.跨组织.跨业务线的执行能力,始终是管理 ...
- c# 方法成员
- linux内核构造skb发包-----raw、tcp网络编程
1. 内核raw发包 #include <linux/init.h>#include <linux/module.h> #include <linux/kernel.h& ...
- 备份一下我的88bugs的application文档
# 服务端口 server.port=8083 #spring.mvc.favicon.enabled=false server.servlet.context-path=/bug/ dateform ...
- linux网络编程之posix线程(一)
今天继续学习posix IPC相关的东东,消息队列和共享内存已经学习过,接下来学习线程相关的知识,下面开始: [注意]:创建失败这时会返回错误码,而通常函数创建失败都会返回-1,然后错误码会保存在er ...
- 10 loader - 配置处理less文件的loader
第一步:装包 cnpm i less-loader -D 安装完提示警告 peerDependencies WARNING less-loader@* requires a peer of less@ ...
- Python基本的语法知识
1. 编程语言的介绍 低级语言:机器语言--------计算机内部只能接受二进制代码,故用0或者1表示的指令称为机器指令,全部的机器指令构成了计算机的机器语言. 汇编语言--------实质上跟机器语 ...
- vue 2.0 watch 监听对象的变化
- go常量的定义和枚举类型
const a,b int = 1,2 const a,b = 1,2 const ( a = "hello" b,c =3,4 ) 常量数值可作为各种类型使用 枚举类型的 ...
- 2019-2020-1 20199312《Linux内核原理与分析》第四周作业
计算机和操作系统的法宝 计算机三个法宝 存储程序计算机.函数调用堆栈机制.中断 操作系统:中断中断上下文的切换--保护和恢复现场 进程上下文的切换. Linux源代码目录分析 arch目录:代码量庞大 ...