编程 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实现自定义滚动条代码分享

Aug 18 HTML / CSS

使用html2canvas实现浏览器截图的示例代码

Jan 26 HTML / CSS

input元素的url类型和email类型简介

Jul 11 HTML / CSS

HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用

Dec 09 HTML / CSS

html5实现微信打飞机游戏

Mar 27 HTML / CSS

HTML5 Canvas中绘制椭圆的4种方法

Apr 24 HTML / CSS

HTML5的一个显示电池状态的API简介

Jun 18 HTML / CSS

调用HTML5的Canvas API绘制图形的快速入门指南

Jun 17 HTML / CSS

使用canvas压缩图片大小的方法示例

Aug 02 HTML / CSS

html5 canvas 实现光线沿不规则路径运动

Apr 20 HTML / CSS

HTML5超文本标记语言的实现方法

Sep 24 HTML / CSS

CSS3实现的侧滑菜单

Apr 27 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

经典的星际争霸，满是回忆的BGM

2020/04/09 星际争霸

php smarty模板引擎的6个小技巧

2014/04/24 PHP

php对数组内元素进行随机调换的方法

2015/05/12 PHP

PHP实现的简单对称加密与解密方法实例小结

2017/08/28 PHP

php面试中关于面向对象的相关问题

2019/02/13 PHP

PHP判断访客是否手机端(移动端浏览器)访问的方法总结【4种方法】

2019/03/27 PHP

js下关于onmouseout、事件冒泡的问题经验小结

2010/12/09 Javascript

解决js数据包含加号+通过ajax传到后台时出现连接错误

2013/08/01 Javascript

javascript 拷贝节点cloneNode()使用介绍

2014/04/03 Javascript

同一个网页中实现多个JavaScript特效的方法

2015/02/02 Javascript

JavaScript中setMonth()方法的使用详解

2015/06/11 Javascript

jquery+CSS实现的水平布局多级网页菜单效果

2015/08/24 Javascript

JS组件Bootstrap Table使用实例分享

2016/05/30 Javascript

关于Function中的bind()示例详解

2016/12/02 Javascript

jQuery实现页面滚动时智能浮动定位

2017/01/08 Javascript

基于jquery实现多选下拉列表

2017/08/02 jQuery

Vue2.0 v-for filter列表过滤功能的实现

2018/09/07 Javascript

微信小程序实现两边小中间大的轮播效果的示例代码

2018/12/07 Javascript

vue实现带过渡效果的下拉菜单功能

2020/02/19 Javascript

three.js 利用uv和ThreeBSP制作一个快递柜功能

2020/08/18 Javascript

vscode自定义vue模板的实现

2021/01/27 Vue.js

Python设计模式之抽象工厂模式

2016/08/25 Python

python基于pyDes库实现des加密的方法

2017/04/29 Python

PyTorch读取Cifar数据集并显示图片的实例讲解

2018/07/27 Python

详解Python 函数如何重载？

2019/04/23 Python

python urllib爬虫模块使用解析

2019/09/05 Python

python3 简单实现组合设计模式

2020/07/02 Python

如何在mac版pycharm选择python版本

2020/07/21 Python

Python Opencv实现单目标检测的示例代码

2020/09/08 Python

canvas 阴影和图形变换的示例代码

2018/01/02 HTML / CSS

Bootstrap File Input文件上传组件

2020/12/01 HTML / CSS

泰海淘：泰国king Power王权免税集团旗下跨境海淘综合型电商

2020/07/26 全球购物

竞选班长的演讲稿

2014/04/24 职场文书

环保倡议书范文

2014/05/12 职场文书

社区爱国卫生月活动总结

2014/06/30 职场文书

2015年感恩节活动总结

2015/03/24 职场文书