编程 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 制作旋转的大风车(充满童年回忆)

Jan 30 HTML / CSS

html5+css3之动画在webapp中的应用

Nov 21 HTML / CSS

详解CSS中iconfont的使用

Aug 04 HTML / CSS

使用CSS3的appearance属性改变元素的外观的方法

Dec 12 HTML / CSS

5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)

Aug 15 HTML / CSS

CSS3属性 line-clamp控制文本行数的使用

Mar 19 HTML / CSS

在HTML5 Canvas中放入图片和保存为图片的方法

May 03 HTML / CSS

记一次高分屏下canvas模糊问题

Feb 17 HTML / CSS

HTML5中的网络存储实现方式

Apr 28 HTML / CSS

AmazeUI折叠式卡片布局，整合内容列表、表格组件实现

Aug 20 HTML / CSS

CSS 制作波浪效果的思路

May 18 HTML / CSS

CSS 鼠标选中文字后改变背景色的实现代码

May 21 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巧获服务器端信息

2006/12/06 PHP

如何突破PHP程序员的技术瓶颈分析

2011/07/17 PHP

PHP+jQuery翻板抽奖功能实现

2015/10/19 PHP

php获取excel文件数据

2017/04/21 PHP

通过代码实例解析PHP session工作原理

2020/12/11 PHP

被jQuery折腾得半死，揭秘为何jQuery为何在IE/Firefox下均无法使用

2010/01/22 Javascript

aspx中利用js实现确认删除代码

2010/07/22 Javascript

九种js弹出对话框的方法总结

2013/03/12 Javascript

JQuery的Ajax跨域请求原理概述及实例

2013/04/26 Javascript

jQuery调用AJAX时Get和post公用的乱码解决方法实例说明

2013/06/04 Javascript

用js提交表单解决一个页面有多个提交按钮的问题

2014/09/01 Javascript

Jquery弹出层插件ThickBox的使用方法

2014/12/09 Javascript

JS排序之快速排序详解

2017/04/08 Javascript

轻量级JS Cookie插件js-cookie的使用方法

2018/03/22 Javascript

Vue 让元素抖动/摆动起来的实现代码

2018/05/31 Javascript

在vue项目中使用Jquery-contextmenu插件的步骤讲解

2019/01/27 jQuery

使用kbone解决Vue项目同时支持小程序问题

2019/11/08 Javascript

javascript canvas检测小球碰撞

2020/04/17 Javascript

基于javascript canvas实现五子棋游戏

2020/07/08 Javascript

python 时间戳与格式化时间的转化实现代码

2016/03/23 Python

浅谈django中的认证与登录

2016/10/31 Python

python xml解析实例详解

2016/11/14 Python

Python内存管理实例分析

2019/07/10 Python

使用keras和tensorflow保存为可部署的pb格式

2020/05/25 Python

python中复数的共轭复数知识点总结

2020/12/06 Python

澳大利亚冲浪和时尚服装网上购物：SurfStitch

2017/07/29 全球购物

泰国演唱会订票网站：StubHub泰国

2018/02/26 全球购物

JBL加拿大官方商店：扬声器、耳机等

2020/10/23 全球购物

客服实习的个人自我鉴定

2013/10/20 职场文书

开办加工厂创业计划书

2014/01/03 职场文书

保护环境建议书

2014/03/12 职场文书

我的中国梦演讲稿初中篇

2014/08/19 职场文书

免职证明样本

2014/10/23 职场文书

后备干部推荐材料

2014/12/24 职场文书

职场新人知识：如何制定一份合理的工作计划？

2019/09/11 职场文书

使用JS实现简易计算器

2021/06/14 Javascript