纯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 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多 ...
随机推荐
- 一个让Java事半功倍的反射库
在Java和Android中,我们常常会使用反射来达到一些兼容的目的.Java原生提供的反射很是麻烦,使用起来很是不方便.比如我们想要调UserManager的静态方法get,使用原生的实现如下 tr ...
- outlook配置其他邮箱登录如qq邮箱或登录无邮件信息记录
今天加班想想自己outlook还没登登录过,于是想着登录一下outlook方便管理邮箱信息,才发现原来登录邮箱都要配置,感觉真是醉了.下面开始正式的配置流程. 选择添加账户 首先,点击文件选择账户设置 ...
- 使用框架时，在web.xml中配置servlet时，拦截请求/和/*的区别。
关于servlet的拦截设置,之前看了好多,说的都不太清除,明白. 最近明白了一些,总的来说就是保证拦截所有用户请求的同时,放行静态资源. 现整理如下: 一.我们都知道在基于Spring的Applic ...
- 用js刷剑指offer(从上到下打印二叉树)
题目描述 从上往下打印出二叉树的每个节点,同层节点从左至右打印. 牛客网链接 js代码 /* function TreeNode(x) { this.val = x; this.left = null ...
- 理解serverless无服务
理解serverless无服务 阅读目录 一:什么是serverless无服务? 二:与传统模式架构区别? 三:serverless优缺点? 四:使用serverless的应用场景有哪些? 回到顶部 ...
- 华为OJ：字符串处理
#include <iostream> #include <stdlib.h> #include <string> #include <sstream> ...
- sql index改怎么建
https://stackoverflow.com/questions/11299217/how-can-i-optimize-this-sql-query-using-indexes ------- ...
- 22 webpack结合Vue使用的总结
总结梳理:webpack中如何使用vue: 1.安装vue的包:cnpm i vue -S 2.由于 在webpack中,推荐使用 .vue这个组件模板文件定义组件, 所以,需要安装 能解析这种文件的 ...
- C# 调用cmd执行命令
private void CmdRun_Click(object sender, EventArgs e) { Process p = new Process(); ...
- 009——C#全局变量定义
(一)窗体二定义,static静态 public static byte[] waveform_data = { }; // 数据,在串口接收中变化 public static bool wavefo ...