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

CSS3制作三角形

2015-12-09 22:04 806 查看

序
今天和小伙伴讨论了下ＣＳＳ下三角形的制作，折腾了半天终于得到了结论。现在匆匆写下作为记录，同时也能给看这篇文章的大家作为参考吧。

正文

在讨论这个问题之前，我想先问大家还记得第一次看教材资料时盒模型上面是怎么说的？没错，你一定会想到！教材是用实物相框作为参考的。那么，你知道相框的边框是怎么做出来的嘛？

先来张相框的图吧

，临时从网上下的也有那个意思了。大家看边框，它的上下左右四边分界线是通过对角线划出来的。那么盒模型既然是从实物抽象参考出来的，那么实现应该也差不多吧？

我们上代码来看看～

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Study</title>
<style>
div{
width: 0;
height: 0;
margin: 0;
padding: 0;
border-top: 100px solid #fff635;
border-right: 100px solid #127fff;
border-bottom: 100px solid #ff2ce9;
border-left: 100px solid #5cff14;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

代码如上所示，下面来看看运行效果：

通过代码我们能够发现，盒模型的实现中它的边框是参考了现实世界的。既然看到了这个图，我相信接下来的三角形制作大家都和我一样恍然大悟了吧。

既然，盒模型是这样的。那么我随意将任意相邻的两个边框设为透明(或者和其附近颜色一样)就可以获得一个直角三角形了，而任意三个就可以获得一个等腰三角形了。

下面放一个直角三角形代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Study</title>
<style>
div{
width: 0;
height: 0;
margin: 0;
padding: 0;
border-top: 100px solid #44463e;
border-right: 100px solid #44463e;
border-bottom: 100px solid transparent;
border-left: 100px solid transparent;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

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

标签： css3 CSS CSS三角形

相关文章推荐

新的分享

章节导航