您的位置：首页 > Web前端 > CSS

CSS3 制作三角形

2015-04-12 00:00 169 查看

摘要: 使用CSS3制作三角形并理解css border属性

最近闲来无事，突然想了解如何制作三角形

首先我们通过下面的例子来了解一下border[也许你会说border的属性谁不会啊？属性大家度会用，但是一个特性你可能没有发现，而这个特性就是制作三角形的关键，大神级的请忽略这个]

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>三角形</title>
<style type="text/css">
.triangle{
border-bottom: 20px solid #000000;
border-top: 20px solid transparent;
border-right: 20px solid #ffff00;
}
.triangle1{
border-right: 20px solid #ffff00;
}

.triangle2{
border-bottom: 20px solid #000000;
border-right: 20px solid #ffff00;
}
</style>
</head>
<body>

<p class="triangle" style="height: 120px;width: 120px;background-color: red;"></p>
<p class="triangle1" style="height: 120px;width: 120px;background-color: red;"></p>
<p class="triangle2" style="height: 120px;width: 120px;background-color: red;"></p>

</body>
</html>

效果：

嘿嘿，不知道通过这三个图片你们有没有发现什么？在两个边框的交界处会出现一个三角形。

因此我们可以通过这个特性来得到一个三角形。

具体：一个边框使用背景色，一个边框使用透明的，这样就会形成一个三角形，但是当你给这个div一个高度时，你会发现你得到的是一个梯形，这时你需要取消这个div的高度，这样就能到三角形。至于三角形所对应的方向可以通过 transform 这个属性来旋转。

<style type="text/css">
.triangle{
border-bottom: 20px solid #000000;
border-top: 20px solid transparent;
border-right: 20px solid #ffff00;
}
</style>

<p class="triangle" style="height: 120px;width: 120px;background-color: red;">

最后给大家一个网站是最有腾讯QQ LOGO的文章，比较实用。通过这个文章以及源码你可以制作多种图形。

http://www.alloyteam.com/wp-content/demos/css3-tencent-qq-logo-basic/

加油

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： CSS3 三角形

相关文章推荐

新的分享

章节导航