用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 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
Oct 10 HTML / CSS
css实例教程 一款纯css3实现的超炫动画背画特效
Nov 05 HTML / CSS
推荐一些比较有用的css3新属性
Nov 11 HTML / CSS
基于Html5实现的react拖拽排序组件示例
Aug 13 HTML / CSS
详解Canvas事件绑定
Jun 27 HTML / CSS
html5的canvas方法使用指南
Dec 15 HTML / CSS
H5新属性audio音频和video视频的控制详解(推荐)
Dec 09 HTML / CSS
canvas实现扭蛋机动画效果的示例代码
Oct 17 HTML / CSS
html5移动端价格输入键盘的实现
Sep 16 HTML / CSS
canvas实现手机的手势解锁的步骤详细
Mar 16 HTML / CSS
H5 video poster属性设置视频封面的方法
May 25 HTML / CSS
关于HTML编码导致的乱码问题
Sep 04 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
关于PHPDocument 代码注释规范的总结
2013/06/25 PHP
php文字水印和php图片水印实现代码(二种加水印方法)
2013/12/25 PHP
php使用mkdir创建多级目录入门例子
2014/05/10 PHP
YII Framework框架教程之缓存用法详解
2016/03/14 PHP
PHP中的多种加密技术及代码示例解析
2016/10/20 PHP
Thinkphp5.0 框架Model模型简单用法分析
2019/10/11 PHP
Javascript合并表格中具有相同内容单元格示例
2013/08/11 Javascript
JavaScript自定义日期格式化函数详细解析
2014/01/14 Javascript
JavaScript给url网址进行encode编码的方法
2015/03/18 Javascript
JQuery实现图片轮播效果
2015/09/15 Javascript
Javascript中的迭代、归并方法详解
2016/06/14 Javascript
JavaScript对象封装的简单实现方法(3种方法)
2017/01/03 Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
2018/05/06 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
2018/11/10 Javascript
vue项目打包之后背景样式丢失的解决方案
2019/01/17 Javascript
Vue.set 全局操作简单示例
2019/09/19 Javascript
9种方法优化jQuery代码详解
2020/02/04 jQuery
Nuxt 项目性能优化调研分析
2020/11/07 Javascript
python从网络读取图片并直接进行处理的方法
2015/05/22 Python
python利用lxml读写xml格式的文件
2017/08/10 Python
Python进阶之尾递归的用法实例
2018/01/31 Python
python学习开发mock接口
2019/04/28 Python
python的scipy实现插值的示例代码
2019/11/12 Python
python实现二分类的卡方分箱示例
2019/11/22 Python
pycharm 如何取消连按两下shift出现的全局搜索
2021/01/15 Python
HTML5 播放 RTSP 视频的实例代码
2019/07/29 HTML / CSS
印度网上购物首选目的地:Flipkart
2016/08/01 全球购物
Bluebella法国官网:英国性感内衣品牌
2019/05/03 全球购物
澳大利亚头发和美容产品购物网站:OZ Hair & Beauty
2020/03/27 全球购物
支部组织生活会方案
2014/06/10 职场文书
党支部班子“四风”问题自我剖析材料
2014/09/28 职场文书
共产党员批评与自我批评
2014/10/15 职场文书
医生见习报告范文
2014/11/03 职场文书
毕业纪念册寄语大全
2015/02/26 职场文书
建国70周年的心得体会(2篇)
2019/09/20 职场文书
Java实现添加条码或二维码到Word文档
2022/06/01 Java/Android