编程 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中background新增的4个新的相关属性用法介绍

Sep 26 HTML / CSS

HTML5 canvas基本绘图之绘制线段

Jun 27 HTML / CSS

html5 利用canvas手写签名并保存的实现方法

Jul 12 HTML / CSS

详解Canvas事件绑定

Jun 27 HTML / CSS

HTML5网页录音和上传到服务器支持PC、Android，支持IOS微信功能

Apr 26 HTML / CSS

HTML5 Canvas鼠标与键盘事件demo示例

Jul 04 HTML / CSS

HTML5 Canvas入门学习教程

Mar 17 HTML / CSS

详解HTML5中rel属性的prefetch预加载功能使用

May 06 HTML / CSS

HTML5 canvas基本绘图之绘制曲线

Jun 27 HTML / CSS

Canvas实现贝赛尔曲线轨迹动画的示例代码

Apr 25 HTML / CSS

VSCode 自定义html5模板的实现

Dec 05 HTML / CSS

CSS中使用grid布局实现一套模板多种布局

Jul 15 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 处理TXT文件(打开/关闭/检查/读取)

2013/05/13 PHP

PHP 提取图片img标记中的任意属性的简单实例

2013/12/10 PHP

PHP基本语法总结

2014/09/06 PHP

thinkPHP框架对接支付宝即时到账接口回调操作示例

2016/11/14 PHP

php中对象引用和复制实例分析

2019/08/14 PHP

简单三步，搞掂内存泄漏

2007/03/10 Javascript

使用jquery清空、复位整个输入域

2015/04/02 Javascript

php常见的页面跳转方法汇总

2015/04/15 Javascript

Jquery注册事件实现方法

2015/05/18 Javascript

JavaScript中Function()函数的使用教程

2015/06/04 Javascript

javascript实现一个网页加载进度loading

2017/01/04 Javascript

使用jQuery卸载全部事件的思路详解

2017/04/03 jQuery

详解Vue 非父子组件通信方法（非Vuex）

2017/05/24 Javascript

基于require.js的使用(实例讲解)

2017/09/07 Javascript

基于webpack-hot-middleware热加载相关错误的解决方法

2018/02/22 Javascript

使用jQuery给Table动态增加行、清空table的方法

2018/09/05 jQuery

react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面

2019/11/12 Javascript

vue组件开发之slider组件使用详解

2020/08/21 Javascript

vue3使用vue-count-to组件的实现

2020/12/25 Vue.js

Python中条件选择和循环语句使用方法介绍

2013/03/13 Python

Python模拟百度登录实例详解

2016/01/20 Python

Python Requests库基本用法示例

2018/08/20 Python

Django+zTree构建组织架构树的方法

2019/08/21 Python

flask框架蓝图和子域名配置详解

2020/01/25 Python

Debenhams百货英国官方网站：Debenhams UK

2016/07/12 全球购物

Mio Skincare英国官网：身体紧致及孕期身体护理

2018/08/19 全球购物

钳工实习自我鉴定

2013/09/19 职场文书

外语学院毕业生的自我鉴定

2013/11/28 职场文书

中秋节礼品促销方案

2014/02/02 职场文书

商场促销活动方案

2014/02/08 职场文书

员工晚婚的请假条

2014/02/08 职场文书

教师自我鉴定范文

2014/03/20 职场文书

生活部的活动方案

2014/08/19 职场文书

领导个人查摆剖析材料

2014/10/29 职场文书

优秀党务工作者先进事迹材料

2014/12/25 职场文书

利用前端HTML+CSS+JS开发简单的TODOLIST功能（记事本）

2021/04/13 Javascript