编程 HTML / CSS

用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复制内容到剪贴板

<!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.黑线划出来的区域就是它的右边框，呈现为一个梯形

CSS Code复制内容到剪贴板

<!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>

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

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

CSS Code复制内容到剪贴板

<!DOCTYPE html>
<html>
<body>
<style>
#triangle-up {
width: 0px;
height: 0px;
border: 100px solid red;
}
</style>
<div id="triangle-up"></div>
</body>
</html>

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

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

CSS Code复制内容到剪贴板

<!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>

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

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

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐

纯CSS3实现质感细腻丝滑按钮

Mar 09 HTML / CSS

CSS3制作缩略图的详细过程

Jul 08 HTML / CSS

详解Canvas事件绑定

Jun 27 HTML / CSS

html5中监听canvas内部元素点击事件的三种方法

Apr 28 HTML / CSS

X/HTML5 和 XHTML2

Oct 17 HTML / CSS

HTML5 canvas画图并保存成图片的jcanvas插件

Jan 17 HTML / CSS

HTML5 canvas基本绘图之填充样式实现

Jun 27 HTML / CSS

HTML5之语义标签介绍

Jul 07 HTML / CSS

HTML5 移动页面自适应手机屏幕四类方法总结

Aug 17 HTML / CSS

CSS实现切角+边框+投影+内容背景色渐变效果

Nov 01 HTML / CSS

开发微信小程序之WXSS样式教程

Apr 18 HTML / CSS

详解CSS3浏览器兼容

Dec 24 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 遍历XP文件夹下所有文件

2008/11/27 PHP

PHP中将ip地址转成十进制数的两种实用方法

2013/08/15 PHP

ThinkPHP之用户注册登录留言完整实例

2014/07/22 PHP

php中实现xml与mysql数据相互转换的方法

2014/12/25 PHP

php导入模块文件分享

2015/03/17 PHP

PHP缩略图生成和图片水印制作

2017/01/07 PHP

Laravel中正确地返回HTTP状态码方法示例

2019/09/10 PHP

JQuery中的ready函数冲突的解决方法

2010/05/17 Javascript

Jquery中显示隐藏的实现代码分析

2011/07/26 Javascript

Js中setTimeout()和setInterval() 何时被调用执行的用法

2013/04/12 Javascript

js冒泡、捕获事件及阻止冒泡方法详细总结

2014/05/08 Javascript

JavaScript+canvas实现七色板效果实例

2016/02/18 Javascript

D3.js实现直方图的方法详解

2016/09/25 Javascript

js a标签点击事件

2017/03/30 Javascript

JS 数组随机洗牌的实例代码

2018/09/12 Javascript

高效jQuery选择器的5个技巧实例分析

2019/11/26 jQuery

react使用antd表单赋值,用于修改弹框的操作

2020/10/29 Javascript

[52:29]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第三局

2016/03/03 DOTA

在Python编程过程中用单元测试法调试代码的介绍

2015/04/02 Python

使用Python的Tornado框架实现一个一对一聊天的程序

2015/04/25 Python

Python打包文件夹的方法小结(zip,tar,tar.gz等)

2016/09/18 Python

Python用imghdr模块识别图片格式实例解析

2018/01/11 Python

Python实现读取Properties配置文件的方法

2018/03/29 Python

python pandas实现excel转为html格式的方法

2018/10/23 Python

python实现简单图片物体标注工具

2019/03/18 Python

python tools实现视频的每一帧提取并保存

2020/03/20 Python

Django中celery执行任务结果的保存方法

2019/07/12 Python

python如何写try语句

2020/07/14 Python

HTML5 与 XHTML2

2008/10/17 HTML / CSS

表彰先进集体通报

2014/01/12 职场文书

银行类自荐信

2014/02/04 职场文书

开工仪式主持词

2014/03/20 职场文书

优秀安全员事迹材料

2014/05/11 职场文书

共产党员公开承诺践诺书

2014/05/28 职场文书

pytest配置文件pytest.ini的详细使用

2021/04/17 Python

Nginx四层负载均衡的配置指南

2021/06/11 Servers