纯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 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多 ...
随机推荐
- BASIS小问题汇总1
try to start SAP system but failed 2019-04-04 Symptom: when i tried to start SAP system, using the c ...
- (三)react-native开发系列之开发环境集成
先上图,由于是虚拟机中的ios虚拟器,所以有点卡 关于react-native的开发集成,主要包括以下几个方面 1.路由及页面跳转 2.数据请求的封装 3.状态的管理 4.公共方法和全局变量的封装 5 ...
- JSON【1】
http://repo1.maven.org/maven2/com/fasterxml/jackson/core/ JSON[jar]包下载 JSON是什么? 是一种轻量级的数据交换格式,完全独 ...
- centos7 修改内核文件 网卡名称为标准名称eth0
在开机安装系统之前按TAB键后输入标记信息后安装系统就可以变成标准网卡接口eth0 或eth1
- Python Multiprocessing 多进程,使用多核CPU计算 并使用tqdm显示进度条
1.背景 在python运行一些,计算复杂度比较高的函数时,服务器端单核CPU的情况比较耗时,因此需要多CPU使用多进程加快速度 2.函数要求 笔者使用的是:pathos.multiproces ...
- Java中实现图片的上传
这边直接存放在c盘的指定目录,在property中指定了一个目录 没有花时间写用户操作的上传页面,直接用swagger2插件,可以上传 默认图片大小超过1mb就不可以上传,可以如下更改 server. ...
- Write-Off
What is a Write-Off? Write-offis an accounting term referring to an action whereby the book value of ...
- 1205 CSRF跨站请求与django中的auth模块使用
目录 今日内容 昨日回顾 基于配置文件的编程思想 importlib模块 简单代码实现 跨站请求伪造csrf 1. 钓鱼网站 如何实现 模拟该现象的产生 2. 解决问题 解决 {% csrf_toke ...
- UML之九种图
UML说是九种图吧!其实是众说纷纭,不管有几种图,我们只要能够很好的运用这几张图就好,主要有用例图.类图.对象图.状态图.活动图.序列图.协作图.构件图和部署图,至于包图是否属于这九种图,我也理不清楚 ...
- mysql安装笔记
MySQL-mysql 8.0.11安装教程 - Laumians - 博客园 https://www.cnblogs.com/laumians-notes/p/9069498.html mysql ...