编程 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 完美实现圆角效果

Jul 13 HTML / CSS

css3 2D图片转动样式可以扩充到Js当中

Apr 29 HTML / CSS

让IE支持CSS3的不完全兼容方案

Sep 19 HTML / CSS

IE浏览器单独写CSS样式的几种方法

Oct 14 HTML / CSS

CSS3实现时间轴效果

Jul 11 HTML / CSS

css3 pointer-events 介绍详解

Sep 18 HTML / CSS

css3 transform导致子元素固定定位变成绝对定位的方法

Mar 06 HTML / CSS

html5如何在Canvas中实现自定义路径动画示例

Sep 18 HTML / CSS

h5网页水印SDK的实现代码示例

Feb 19 HTML / CSS

html5录音功能实战示例

Mar 25 HTML / CSS

HTML5 背景的显示区域实现

Jul 09 HTML / CSS

在CSS中使用when/else的方法

Jan 18 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邮件群发机实现代码

2016/02/16 PHP

php+ajax实现异步上传文件或图片功能

2017/07/18 PHP

Laravel框架用户登陆身份验证实现方法详解

2017/09/14 PHP

通过判断JavaScript的版本实现执行不同的代码

2010/05/11 Javascript

基于Jquery的标签智能验证实现代码

2010/12/27 Javascript

JS 退出系统并跳转到登录界面的实现代码

2013/06/29 Javascript

jquery无法设置checkbox选中即没有变成选中状态

2014/03/27 Javascript

Javascript中call与apply的学习笔记

2014/09/22 Javascript

浅谈javascript 函数内部属性

2015/01/21 Javascript

Jquery实现动态切换图片的方法

2015/05/18 Javascript

深入解读JavaScript中的Hoisting机制

2015/08/12 Javascript

javascript跨域的方法汇总

2015/10/23 Javascript

xmlplus组件设计系列之网格（DataGrid）(10）

2017/05/05 Javascript

JS动态添加的div点击跳转到另一页面实现代码

2017/09/30 Javascript

Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法

2017/10/24 Javascript

详解vue中组件参数

2018/07/09 Javascript

vue elementUI 表单嵌套验证的实例代码

2019/11/06 Javascript

序列化模块json代码实例详解

2020/03/03 Javascript

[05:35]DOTA2英雄梦之声_第13期_拉比克

2014/06/21 DOTA

[09:33]2015国际邀请赛第四日TOP10

2015/08/08 DOTA

[01:30]2016国际邀请赛中国区预选赛神秘商店火爆开启

2016/06/26 DOTA

python实现数独算法实例

2015/06/09 Python

手把手教你用python抢票回家过年(代码简单)

2018/01/21 Python

实例介绍Python中整型

2019/02/11 Python

更新修改后的Python模块方法

2019/03/03 Python

Python实现的文轩网爬虫完整示例

2019/05/16 Python

Python三元运算与lambda表达式实例解析

2019/11/30 Python

Sasa莎莎海外旗舰店：香港莎莎美妆平台

2018/03/21 全球购物

警察思想汇报

2014/01/04 职场文书

村党支部换届选举方案

2014/05/02 职场文书

毕业证委托书范文

2014/09/26 职场文书

2014年路政工作总结

2014/12/10 职场文书

小学生表扬稿范文

2015/05/05 职场文书

全家福照片寄语怎么写？

2019/04/02 职场文书

Pytorch 中net.train 和 net.eval的使用说明

2021/05/22 Python

SpringBoot整合MongoDB的实现步骤

2021/06/23 MongoDB