编程 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 mask遮罩实现一些特效

Oct 24 HTML / CSS

CSS3 特效范例整理

Aug 22 HTML / CSS

CSS3 选择器伪类选择器介绍

Jan 21 HTML / CSS

如何利用CSS3制作3D效果文字具体实现样式

May 02 HTML / CSS

纯CSS3实现手风琴风格菜单具体步骤

May 06 HTML / CSS

CSS3哪些新特性值得称赞

Mar 02 HTML / CSS

实例讲解CSS3中Transform的perspective属性的用法

Apr 22 HTML / CSS

利用CSS3制作简单的3d半透明立方体图片展示

Mar 25 HTML / CSS

网易微博Web App用HTML5开发的过程介绍

Jun 13 HTML / CSS

多视角3D可旋转的HTML5 Logo动画

Mar 02 HTML / CSS

实例讲解使用SVG制作loading加载动画的方法

Apr 05 HTML / CSS

HTML5标签大全

Nov 23 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中其实也可以用方法链

2011/11/10 PHP

PHP strip_tags()去除HTML、XML以及PHP的标签介绍

2014/02/18 PHP

简单说说PHP优化那些事(经验分享)

2014/11/27 PHP

php+mysql数据库查询实例

2015/01/21 PHP

PHP引用的调用方法分析

2016/04/25 PHP

php 读取文件夹下所有图片、文件的实例

2018/10/17 PHP

javascript计时器事件使用详解

2014/01/07 Javascript

关于Javascript加载执行优化的研究报告

2014/12/16 Javascript

JavaScript中的冒泡排序法

2016/08/03 Javascript

javascript数字验证的实例代码(推荐)

2016/08/20 Javascript

javascript 封装Date日期类实例详解

2017/05/28 Javascript

js移动端图片压缩上传功能

2020/08/18 Javascript

vue2里面ref的具体使用方法

2017/10/27 Javascript

VUE 使用中踩过的坑

2018/02/08 Javascript

移动端滑动切换组件封装 vue-swiper-router实例详解

2018/11/25 Javascript

微信小游戏之使用three.js 绘制一个旋转的三角形

2019/06/10 Javascript

Nest.js散列与加密实例详解

2021/02/24 Javascript

Python使用cx_Oracle调用Oracle存储过程的方法示例

2017/10/07 Python

Python实现自动上京东抢手机

2018/02/06 Python

PyQt5每天必学之弹出消息框

2018/04/19 Python

在python环境下运用kafka对数据进行实时传输的方法

2018/12/27 Python

python利用跳板机ssh远程连接redis的方法

2019/02/19 Python

Python中sorted()排序与字母大小写的问题

2020/01/14 Python

jupyter notebook 增加kernel教程

2020/04/10 Python

python3中calendar返回某一时间点实例讲解

2020/11/18 Python

html5菜单折纸效果

2014/04/22 HTML / CSS

使用html5实现表格实现标题合并的实例代码

2019/05/13 HTML / CSS

香港草莓网：Strawberrynet香港

2019/05/10 全球购物

应届生服装设计自我评价

2013/09/20 职场文书

大三毕业自我鉴定

2014/01/15 职场文书

2014年作风建设剖析材料

2014/10/23 职场文书

退货证明模板

2015/06/23 职场文书

小学三年级班主任工作经验交流材料

2015/11/02 职场文书

学习杨善洲同志先进事迹心得体会

2016/01/23 职场文书

linux中nohup和后台运行进程查看及终止

2021/06/24 Python

JavaScript 与 TypeScript之间的联系

2021/11/27 Javascript