编程 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中动画属性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