您的位置：首页 > 其它

利用border属性制作各种图形。

2016-09-19 14:05 405 查看

这是一个比较正常的

但如果我们把宽度和高度去掉呢？

好像看不太出来对吧，我们来给边框加上不同颜色。

看出啥了没，分明就是每个边都是一个三角形啊。

那假如我想要一个朝下的三角形是不是我只要把border-top给显示出来，其他的隐藏就好了啊。OK，说干就干

transparent表示透明，所以可以当做隐藏来使用。你可能会说那直接只设置border-top不就好了吗，但你可以发现是不行的，你试试就知道了。

单个：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#item1{
width:0px;
height:0px;
border:30px solid transparent;
border-top:30px solid red;
}
#item2{
width:0px;
height:0px;
border:30px solid transparent;
border-left:30px solid green;
}
#item3{
width:0px;
height:0px;
border:30px solid transparent;
border-bottom:30px solid pink;
}
#item4{
width:0px;
height:0px;
border:30px solid transparent;
border-right:30px solid lightblue;
}
</style>
</head>
<body>
<div id="item1"></div>
<div id="item2"></div>
<div id="item3"></div>
<div id="item4"></div>
</body>
</html>

两个组合：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#item1{
width:0px;
height:0px;
border:30px solid transparent;
border-top:30px solid red;
border-right:30px solid red;
}
#item2{
width:0px;
height:0px;
border:30px solid transparent;
border-top:30px solid green;
border-left:30px solid green;
}
#item3{
width:0px;
height:0px;
border:30px solid transparent;
border-top:30px solid pink;
border-bottom:30px solid pink;
}
#item4{
width:0px;
height:0px;
border:30px solid transparent;
border-right:30px solid lightblue;
border-bottom:30px solid lightblue;
}
#item5{
width:0px;
height:0px;
border:30px solid transparent;
border-right:30px solid lightsalmon;
border-left:30px solid lightsalmon;
}
#item6{
width:0px;
height:0px;
border:30px solid transparent;
border-bottom:30px solid red;
border-left:30px solid red;
}
</style>
</head>
<body>
<div id="item1"></div>
<div id="item2"></div>
<div id="item3"></div>
<div id="item4"></div>
<div id="item5"></div>
<div id="item6"></div>
</body>
</html>

三个组合：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#item1{
width:0px;
height:0px;
border-left:30px solid transparent;

border-top:30px solid red;
border-right:30px solid red;
border-bottom:30px solid red;
}
#item2{
width:0px;
height:0px;
border-bottom:30px solid transparent;

border-top:30px solid green;
border-right:30px solid green;
border-left:30px solid green;
}
#item3{
width:0px;
height:0px;
border-right:30px solid transparent;

border-top:30px solid pink;
border-left:30px solid pink;
border-bottom:30px solid pink;
}
#item4{
width:0px;
height:0px;
border-top:30px solid transparent;

border-right:30px solid lightblue;
border-left:30px solid lightblue;
border-bottom:30px solid lightblue;
}
</style>
</head>
<body>
<div id="item1"></div>
<div id="item2"></div>
<div id="item3"></div>
<div id="item4"></div>
</body>
</html>

配合宽度使用。

注意宽度别超过边框长度。

平行四边形

完。

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

标签：

相关文章推荐

新的分享

章节导航