编程 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实现Material Design效果

Mar 09 HTML / CSS

CSS3转换功能transform主要属性值分析及实现分享

May 06 HTML / CSS

通过css3的filter滤镜改变png图片的颜色的示例代码

May 06 HTML / CSS

HTML5实现QQ聊天气泡效果

Jun 26 HTML / CSS

html Table 表头固定的实现

Jan 22 HTML / CSS

html5指南-7.geolocation结合google maps开发一个小的应用

Jan 07 HTML / CSS

html5 Canvas画图教程(1)—画图的基本常识

Jan 09 HTML / CSS

用HTML5制作一个简单的桌球游戏的教程

May 12 HTML / CSS

举例详解HTML5中使用JSON格式提交表单

Jun 16 HTML / CSS

canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)

Jan 10 HTML / CSS

html5写一个BUI折叠菜单插件的实现方法

Sep 11 HTML / CSS

css中有哪些方式可以隐藏页面元素及区别

Jun 16 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

destoon数据库表说明汇总

2014/07/15 PHP

让焦点自动跳转

2006/07/01 Javascript

可以显示单图片，多图片ajax请求的ThickBox3.1类下载

2007/12/23 Javascript

javascript 多级checkbox选择效果

2009/08/20 Javascript

firefox下对ajax的onreadystatechange的支持情况分析

2009/12/14 Javascript

js取两个数组的交集|差集|并集|补集|去重示例代码

2013/08/07 Javascript

ExtJS4 表格的嵌套 rowExpander应用

2014/05/02 Javascript

JS实现当前页居中分页效果的方法

2015/06/18 Javascript

js贪吃蛇网页版游戏特效代码分享（挑战十关）

2015/08/24 Javascript

浅谈js的html元素的父节点,子节点

2016/08/06 Javascript

微信小程序 wxapp内容组件 icon详细介绍

2016/10/31 Javascript

JS公共小方法之判断对象是否为domElement的实例

2016/11/25 Javascript

微信小程序闭包写法详细介绍

2016/12/14 Javascript

详解win7 cmd执行vue不是内部命令的解决方法

2017/07/27 Javascript

js获取css的各种样式并且设置他们的方法

2017/08/22 Javascript

Vue.js自定义事件的表单输入组件方法

2018/03/08 Javascript

Koa2微信公众号开发之本地开发调试环境搭建

2018/05/16 Javascript

详解javascript函数写法大全

2019/03/25 Javascript

详解基于Vue的支持数据双向绑定的select组件

2019/09/02 Javascript

微信小程序实现发微博功能的示例代码

2020/06/24 Javascript

详解vue中使用transition和animation的实例代码

2020/12/12 Vue.js

浅析vue中的nextTick

2020/12/28 Vue.js

使用pycharm生成代码模板的实例

2018/05/23 Python

Django文件存储默认存储系统解析

2019/08/02 Python

python循环输出三角形图案的例子

2019/11/22 Python

PyTorch加载预训练模型实例(pretrained)

2020/01/17 Python

AmazeUI 模态窗口的实现代码

2020/08/18 HTML / CSS

Lampenwelt德国：欧洲领先的灯具和照明在线商店

2018/08/05 全球购物

请写出一段Python代码实现删除一个list里面的重复元素

2015/12/29 面试题

自行车租赁公司创业计划书

2014/01/28 职场文书

大学活动总结范文

2014/04/29 职场文书

品德评语大全

2014/05/05 职场文书

销售员岗位职责

2014/06/09 职场文书

刑事和解协议书范本

2014/11/19 职场文书

五年级作文之想象作文

2019/10/30 职场文书

Java实现简单小画板

2022/06/10 Java/Android