编程 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实现圆角,阴影,透明

Dec 23 HTML / CSS

CSS3实现头像旋转效果

Mar 13 HTML / CSS

如何在网站上添加谷歌定位信息

Apr 16 HTML / CSS

video结合canvas实现视频在线截图功能

Jun 25 HTML / CSS

HTML5的革新结构之美

Jun 20 HTML / CSS

html5 CSS过度-webkit-transition使用介绍

Jul 02 HTML / CSS

HTML5中div、article、section的区别及使用介绍

Aug 14 HTML / CSS

HTML5所有标签汇总及标签意义解释

Mar 12 HTML / CSS

html5+css如何实现中间大两头小的轮播效果

Dec 06 HTML / CSS

css display table 自适应高度、宽度问题的解决

May 07 HTML / CSS

Canvas绘制像素风图片的示例代码

Sep 25 HTML / CSS

VW、VH适配移动端的解决方案与常见问题

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