用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 制作旋转的大风车(充满童年回忆)
Jan 30 HTML / CSS
html5+css3之动画在webapp中的应用
Nov 21 HTML / CSS
详解CSS中iconfont的使用
Aug 04 HTML / CSS
使用CSS3的appearance属性改变元素的外观的方法
Dec 12 HTML / CSS
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
Aug 15 HTML / CSS
CSS3属性 line-clamp控制文本行数的使用
Mar 19 HTML / CSS
在HTML5 Canvas中放入图片和保存为图片的方法
May 03 HTML / CSS
记一次高分屏下canvas模糊问题
Feb 17 HTML / CSS
HTML5中的网络存储实现方式
Apr 28 HTML / CSS
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
Aug 20 HTML / CSS
CSS 制作波浪效果的思路
May 18 HTML / CSS
CSS 鼠标选中文字后改变背景色的实现代码
May 21 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巧获服务器端信息
2006/12/06 PHP
如何突破PHP程序员的技术瓶颈分析
2011/07/17 PHP
PHP+jQuery翻板抽奖功能实现
2015/10/19 PHP
php获取excel文件数据
2017/04/21 PHP
通过代码实例解析PHP session工作原理
2020/12/11 PHP
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
2010/01/22 Javascript
aspx中利用js实现确认删除代码
2010/07/22 Javascript
九种js弹出对话框的方法总结
2013/03/12 Javascript
JQuery的Ajax跨域请求原理概述及实例
2013/04/26 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
2013/06/04 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
2014/09/01 Javascript
Jquery弹出层插件ThickBox的使用方法
2014/12/09 Javascript
JS排序之快速排序详解
2017/04/08 Javascript
轻量级JS Cookie插件js-cookie的使用方法
2018/03/22 Javascript
Vue 让元素抖动/摆动起来的实现代码
2018/05/31 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
2019/01/27 jQuery
使用kbone解决Vue项目同时支持小程序问题
2019/11/08 Javascript
javascript canvas检测小球碰撞
2020/04/17 Javascript
基于javascript canvas实现五子棋游戏
2020/07/08 Javascript
python 时间戳与格式化时间的转化实现代码
2016/03/23 Python
浅谈django中的认证与登录
2016/10/31 Python
python xml解析实例详解
2016/11/14 Python
Python内存管理实例分析
2019/07/10 Python
使用keras和tensorflow保存为可部署的pb格式
2020/05/25 Python
python中复数的共轭复数知识点总结
2020/12/06 Python
澳大利亚冲浪和时尚服装网上购物:SurfStitch
2017/07/29 全球购物
泰国演唱会订票网站:StubHub泰国
2018/02/26 全球购物
JBL加拿大官方商店:扬声器、耳机等
2020/10/23 全球购物
客服实习的个人自我鉴定
2013/10/20 职场文书
开办加工厂创业计划书
2014/01/03 职场文书
保护环境建议书
2014/03/12 职场文书
我的中国梦演讲稿初中篇
2014/08/19 职场文书
免职证明样本
2014/10/23 职场文书
后备干部推荐材料
2014/12/24 职场文书
职场新人知识:如何制定一份合理的工作计划?
2019/09/11 职场文书
使用JS实现简易计算器
2021/06/14 Javascript