欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > CSS入门 >

CSS实现三角形制作方法

 

相信大家在浏览网站的时候,经常看到各种下拉菜单,上面会有一个小小的三角形,实现这种三角形一般会想到是用图片或者iconfont实现,然而其实这种三角形除了用图片和iconfont css也可以实现。制作三角形的做法,主要是利用边框做成的,观察以下代码:

(可以专注红色部分代码)

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>边框制作三角形</title>

<style>

*{padding: 0; margin: 0; list-style: none;}

.box{width: 50px; height: 50px; margin:100px auto;}

.box{

border-top:100px solid red;

border-right:100px solid lime;

border-bottom:100px solid blue;

border-left:100px solid yellow;

}

</style>

</head>

<body>

<div class="box"></div>

</body>

</html>

一个宽高为50px*50px的盒子,分别加了上下左右四个100px不同颜色的边框,效果如图所示:

CSS实现三角形制作方法

 

那个可以想象,如果把盒子宽高都设置成0,则会显示4个不同颜色的三角形,代码如下:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>边框制作三角形</title>

<style>

*{padding: 0; margin: 0; list-style: none;}

.box{width:0; height:0; margin:100px auto;}

.box{

border-top:100px solid red;

border-right:100px solid lime;

border-bottom:100px solid blue;

border-left:100px solid yellow;

}

</style>

</head>

<body>

<div class="box"></div>

</body>

</html>

效果如下:

CSS实现三角形制作方法

 

如果想要得到单个三角形,必须把其他三角形隐藏掉,所以现在先来了解一下transparent这个属性值。

说明:

RGBA(R,G,B,A)

取值:

R

红色值。正整数 | 百分数

G

绿色值。正整数 | 百分数

B

蓝色值。正整数 | 百分数

A

Alpha透明度。取值0~1之间。

说明:

用来指定全透明色彩。

transparent是全透明黑色(black)的速记法,即一个类似rgba(0,0,0,0)这样的值。

CSS1中,transparent被用来作为background-color的一个参数值,用于表示背景透明。

CSS2中,border-color也开始接受transparent作为参数值。

CSS3中,transparent被延伸到任何一个有color值的属性上。

有了transparent这个属性值,我们可以通过它把不必要是边框隐藏掉,就可以实现我们想要的三角形啦,代码如下:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>边框制作三角形</title>

<style>

*{padding: 0; margin: 0; list-style: none;}

.box{width:0; height:0; margin:100px auto;}

.box{

border-top:100px solid red;

border-right:100px solid transparent;/*透明颜色的边框*/

border-bottom:100px solid transparent;/*透明颜色的边框*/

border-left:100px solid transparent;/*透明颜色的边框*/

}

</style>

</head>

<body>

<div class="box"></div>

</body>

</html>

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/rumen/r23828.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2017-04-19 08:35 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。