编程 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实现任意图片lowpoly动画效果实例

May 11 HTML / CSS

CSS3 clip-path 用法介绍详解

Mar 01 HTML / CSS

css3圆角样式分享自定义按钮样式

Dec 27 HTML / CSS

通过CSS3的object-fit来调整图片适配尺寸的技巧简介

Feb 27 HTML / CSS

如何开发一款堪比APP的微信小程序（腾讯内部团队分享）

Dec 22 HTML / CSS

基于 HTML5 Canvas实现的交互式地铁线路图

Mar 05 HTML / CSS

HTML5 CSS3新的WEB标准和浏览器支持

Jul 16 HTML / CSS

HTML5 CSS3打造相册效果附源码下载

Jun 16 HTML / CSS

深入理解HTML的FormData对象

May 17 HTML / CSS

如何用H5实现一个触屏版的轮播器的实例

Jan 09 HTML / CSS

canvas拼图功能实现代码示例

Nov 21 HTML / CSS

关于iframe跨域使用postMessage的实现

Oct 29 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

ThinkPHP行为扩展Behavior应用实例详解

2014/07/22 PHP

PHP实现基于mysqli的Model基类完整实例

2016/04/08 PHP

javascript cookies操作集合

2010/04/12 Javascript

cookie的secure属性详解

2015/04/08 Javascript

微信+angularJS的SPA应用中用router进行页面跳转，jssdk校验失败问题解决

2016/09/09 Javascript

JavaScript错误处理和堆栈追踪详解

2017/04/18 Javascript

React教程之封装一个Portal可复用组件的方法

2018/01/02 Javascript

浅谈webpack对样式的处理

2018/01/05 Javascript

微信小程序实现传参数的几种方法示例

2018/01/10 Javascript

利用JS动态生成隔行换色HTML表格的两种方法

2018/10/09 Javascript

vue基础之v-bind属性、class和style用法分析

2019/03/11 Javascript

微信小程序mpvue点击按钮获取button值的方法

2019/05/29 Javascript

jQuery实现的图片点击放大缩小功能案例

2020/01/02 jQuery

vue引用外部JS的两种种方法

2020/01/28 Javascript

浅谈JavaScript窗体Window.ShowModalDialog使用

2020/07/22 Javascript

python实现比较两段文本不同之处的方法

2015/05/30 Python

Python编程给numpy矩阵添加一列方法示例

2017/12/04 Python

Python中getpass模块无回显输入源码解析

2018/01/11 Python

Python实现替换文件中指定内容的方法

2018/03/19 Python

python中pika模块问题的深入探究

2018/10/13 Python

Python中按键来获取指定的值

2019/03/02 Python

Django RBAC权限管理设计过程详解

2019/08/06 Python

如何通过Python实现RabbitMQ延迟队列

2020/11/28 Python

英国领先的办公用品供应商：Viking

2016/08/01 全球购物

英国二手iPhone、音乐、电影和游戏商店：musicMagpie

2018/10/26 全球购物

ESDlife健康生活易：身体检查预订、搜寻及比较

2019/05/10 全球购物

海量信息软件测试笔试题

2015/08/08 面试题

护士自我介绍信

2014/01/13 职场文书

计算机个人求职信范例

2014/01/24 职场文书

2014年师德师风学习材料

2014/05/16 职场文书

纪念9.18事变演讲稿

2014/09/14 职场文书

解读MySQL的客户端和服务端协议

2021/05/10 MySQL

pytorch--之halfTensor的使用详解

2021/05/24 Python

面试被问select......for update会锁表还是锁行

2021/11/11 MySQL

什么是Python装饰器？如何定义和使用？

2022/04/11 Python

深入理解mysql事务隔离级别和存储引擎

2022/04/12 MySQL