用CSS3绘制三角形的简单方法


Posted in HTML / CSS onJuly 17, 2015

    利用CSS的border以及它的属性值transparent来实现三角形,其中最主要的是要明白由于div的高度跟宽度都为0,margin,padding也为0,所以元素框的大小就是他的border的叠加,由于相邻boder会重叠,故存在内容宽高时其实任意一边存在的border都是梯形的,当div内容宽高为0时,border就表现为三角形,将四个border的颜色设置为transparent表示边框透明,而将右边框颜色再设置为红色就发现三角形出现了,其实这个三角形是右边框。

CSS Code复制内容到剪贴板
  1. <!DOCTYPE html>   
  2. <html>   
  3. <body>   
  4.     <style>    
  5.         #triangle-up {    
  6.             width0px;    
  7.             height0px;   
  8.             border100px solid transparent;   
  9.             border-right:  100px solid red;   
  10.          }   
  11.     </style>   
  12.     <div id="triangle-up"></div>   
  13. </body>   
  14. </html>  

    图解

    正常的框模型,div的内容width以及height均为50px.黑线划出来的区域就是它的右边框,呈现为一个梯形

CSS Code复制内容到剪贴板
  1. <!DOCTYPE html>   
  2. <html>   
  3. <body>   
  4.     <style>    
  5.         #triangle-up {    
  6.             width50px;    
  7.             height50px;   
  8.             border100px solid red;    
  9.             border-bottom100px solid red;   
  10.          }   
  11.     </style>   
  12.     <div id="triangle-up"></div>   
  13. </body>   
  14. </html>  

用CSS3绘制三角形的简单方法

    当div的内容width以及height均为0.黑线划出来的区域就是它的右边框,呈现为一个三角形

CSS Code复制内容到剪贴板
  1. <!DOCTYPE html>   
  2. <html>   
  3. <body>   
  4.     <style>    
  5.         #triangle-up {    
  6.             width0px;    
  7.             height0px;   
  8.             border100px solid red;    
  9.          }   
  10.     </style>   
  11.     <div id="triangle-up"></div>   
  12. </body>   
  13. </html>  

用CSS3绘制三角形的简单方法

    当div的内容width以及height均为0.上下左边框都为透明的时候,只有右边框显示为红色,三角形就看到了

CSS Code复制内容到剪贴板
  1. <!DOCTYPE html>   
  2. <html>   
  3. <body>   
  4.     <style>    
  5.         #triangle-up {    
  6.             width0px;    
  7.             height0px;   
  8.             border100px solid transparent;   
  9.             border-right:  100px solid red;   
  10.          }   
  11.     </style>   
  12.     <div id="triangle-up"></div>   
  13. </body>   
  14. </html>  

用CSS3绘制三角形的简单方法

结合css其他特性定能做出更有趣的一些效果!

HTML / CSS 相关文章推荐
CSS3中动画属性transform、transition和animation属性的区别
Sep 25 HTML / CSS
CSS3实现类似翻书效果的过渡动画的示例代码
Sep 06 HTML / CSS
css3设置box-pack和box-align让div里面的元素垂直居中
Sep 01 HTML / CSS
CSS3径向渐变之大鱼吃小鱼之孤单的大鱼
Apr 26 HTML / CSS
结合CSS3的新特性来总结垂直居中的实现方法
May 30 HTML / CSS
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
Dec 22 HTML / CSS
详解使用HTML5的classList属性操作CSS类
Oct 13 HTML / CSS
HTML5新表单元素_动力节点Java学院整理
Jul 12 HTML / CSS
HTML5中canvas中的beginPath()和closePath()的重要性
Aug 24 HTML / CSS
canvas三角函数模拟水波效果的示例代码
Jul 03 HTML / CSS
HTML5中Localstorage的使用教程
Jul 09 HTML / CSS
配置H5的滚动条样式的示例代码
Mar 09 HTML / CSS
详解CSS3中Media Queries的相关使用
Jul 17 #HTML / CSS
CSS3中box-shadow的用法介绍
Jul 15 #HTML / CSS
举例详解CSS3中的Transition
Jul 15 #HTML / CSS
使用CSS3制作一个简单的Chrome模拟器
Jul 15 #HTML / CSS
初探CSS3中的calc()功能
Jul 14 #HTML / CSS
CSS3中线性颜色渐变的一些实现方法
Jul 14 #HTML / CSS
CSS3中HSL和HSLA的简单使用示例
Jul 14 #HTML / CSS
You might like
让的PHP代码飞起来的40条小技巧(提升php效率)
2010/04/12 PHP
php中curl、fsocket、file_get_content三个函数的使用比较
2014/05/09 PHP
浅谈使用 Yii2 AssetBundle 中 $publishOptions 的正确姿势
2017/11/08 PHP
Javascript----文件操作
2007/01/18 Javascript
js innerHTML 的一些问题的解决方法
2008/06/22 Javascript
Mootools 1.2教程(3) 数组使用简介
2009/09/14 Javascript
JavaScript DOM 学习第三章 内容表格
2010/02/19 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
2011/10/09 Javascript
JavaScript常用对象的方法和属性小结
2012/01/24 Javascript
JavaScript对象的property属性详解
2014/04/01 Javascript
js图片自动轮播代码分享(js图片轮播)
2014/05/06 Javascript
jQuery移除元素自动解绑事件实现思路及代码
2014/05/31 Javascript
jquery事件preventDefault()方法用法实例
2015/01/16 Javascript
详解JavaScript中localStorage使用要点
2016/01/13 Javascript
APP中javascript+css3实现下拉刷新效果
2016/01/27 Javascript
详解Webpack DLL用法以及功能
2017/07/11 Javascript
JS实现可用滑块滑动的缓动图代码
2019/09/01 Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
2020/04/08 Javascript
《Python之禅》中对于Python编程过程中的一些建议
2015/04/03 Python
python 常用的基础函数
2018/07/10 Python
python组合无重复三位数的实例
2018/11/13 Python
彻底理解Python中的yield关键字
2019/04/01 Python
Python包,__init__.py功能与用法分析
2020/01/07 Python
keras自动编码器实现系列之卷积自动编码器操作
2020/07/03 Python
python3.5的包存放的具体路径
2020/08/16 Python
Python Sqlalchemy如何实现select for update
2020/10/12 Python
Python通过Schema实现数据验证方式
2020/11/12 Python
Pytorch模型迁移和迁移学习,导入部分模型参数的操作
2021/03/03 Python
香蕉共和国Banana Republic官网:美国GAP旗下偏贵族风格服饰品牌
2016/11/21 全球购物
.NET remoting中对象激活的两种方式
2015/06/08 面试题
班主任评语大全
2014/04/26 职场文书
辞职信范文大全
2015/03/02 职场文书
2015中秋节晚会开场白
2015/07/30 职场文书
python 自动化偷懒的四个实用操作
2021/04/11 Python
Win11怎么进入安全模式?Windows 11进入安全模式的方法
2021/11/21 数码科技
python 实现图片特效处理
2022/04/03 Python