CSS3绘制三角形实例介绍
时间:2016-05-07
本文章主要向码农介绍用CSS3如何绘制三角形,方法很简单,主要使用到css中的border属性,需要的码农可以参考下。
利用CSS的border以及它的属性值transparent来实现三角形,其中最主要的是要明白由于div的高度跟宽度都为0,margin,padding也为0,所以元素框的大小就是他的border的叠加,由于相邻boder会重叠,故存在内容宽高时其实任意一边存在的border都是梯形的,当div内容宽高为0时,border就表现为三角形,将四个border的颜色设置为transparent表示边框透明,而将右边框颜色再设置为红色就发现三角形出现了,其实这个三角形是右边框。
<!DOCTYPE html>
<html>
<body>
<style>
#triangle-up {
width: 0px;
height: 0px;
border: 100px solid transparent;
border-right: 100px solid red;
}
</style>
<div id="triangle-up"></div>
</body>
</html>
正常的框模型,div的内容width以及height均为50px.黑线划出来的区域就是它的右边框,呈现为一个梯形
<!DOCTYPE html>
<html>
<body>
<style>
#triangle-up {
width: 50px;
height: 50px;
border: 100px solid red;
border-bottom: 100px solid red;
}
</style>
<div id="triangle-up"></div>
</body>
</html>
当div的内容width以及height均为0.黑线划出来的区域就是它的右边框,呈现为一个三角形
当div的内容width以及height均为0.上下左边框都为透明的时候,只有右边框显示为红色,三角形就看到了
结合css其他特性定能做出更有趣的一些效果!
更多文章:
- 通过hiveserver远程服务构建hive web查询分析工具
- Hive 中内部表与外部表的区别与创建方法
- 常用统计分析 SQL 在 AWK 中的实现
- java 中 16 进制 HEX 转换成字节码形式的 UTF-8
- Hadoop 多表 join:map side join 范例
- 实战 windows7 下 eclipse 远程调试 linux hadoop
- Hive 在多维统计分析中的应用 & 技巧总结
- shell 学习笔记(18)
- Hive 中的复合数据结构简介以及一些函数的用法说明
- BloomFilter 简介及在 Hadoop reduce side join 中的应用
- 关于 hadoop reduce 阶段遍历 Iterable 的 2 个“坑”
- Hadoop Mapper 阶段将数据直接从 HDFS 导入 Hbase
- 译文 | 量化投资教程:投资组合优化与R实践
- 浅谈 java 中构建可执行 jar 包的几种方式
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- java安全编码指南之:可见性和原子性
- java安全编码指南之:敏感类的拷贝
- 测试面试题集-MySQL数据库灵魂拷问
- Linux提权姿势一:滥用SUDO提权
- Linux提权姿势二:利用NFS提权
- 统计回归拟合方程参数
- biomaRt包实现不同物种之间同源基因转换
- 使用OpenCV和Python标记超像素色彩
- 听说,你的Loki还是单体?(上篇)
- 加一
- APP自动化测试系列之Appium介绍及运行原理
- 没想到吧,Markdown 还能这么玩!
- 致敬Vue3: 1.1万字从零解读Vue3.0源码响应式系统
- APP自动化测试系列之Desired Capabilities详解
- Kafka分区分配策略(Partition Assignment Strategy)