先来看几张图:
1.中间有width,无height
2.中间无width,有height
3.中间有width,也有height
4.即无 width,也无height
5. 中间无width,也无height,但是进行边框透明处理 得到一个三角形
这些图使用css可以非常简单的实现的,你需要先了解以下的知识:
1. border-width:这个属性能够设置一个元素的四个边框的宽度.(顺时针设置,找对称)
border-width:10px ;(上右下左都是10px)
border-width:10px 20px 30px;(上:10px,左右:20px,下:30px)
border-width:10px 20px; (上下:10px,左右:20px)
border-width:10px 20px 30px 40px; (上:10px, 右:20px,下:30px ,左:40px)
2 . border-color(同样也是能够设置上下左右的边框颜色,顺序跟border-width的相同)
所以我们来看它的属性值:
a. color : 指定背景颜色
b. transparent : 指定是透明的
c. inherit : 指定边框的颜色,应该从父元素继承
注意,上边的图形其实是所设置的过大的边框,但是没有内容(根据盒子模型,width和height是指内容的宽度和高度) , 最后才导致图形这样显示的,如果我们没有指定内容的width和height,那么相当于这个东西不是空心的,而是一个实体(只有边框),并且, 由四个颜色平均占据这个实体的空间,一个实心正方体平均分成四份,从侧面看, 当然每一份就是呈现一个"三角形区域". 我们如果把其中的某一块透明处理,那么就会得到不同规则的图形,比如左上右透明处理,那么就会只剩 "下"这个区域,于是就是我们所看到的三角形了.
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div {
margin: 10px;
}
#mydiv1 {
width: 50px;
height: 0px;
border-width: 100px;
border-style: solid;
border-color: bisque fuchsia red forestgreen;
}
#mydiv2 {
width: 0px;
height: 60px;
border-width: 100px;
border-style: solid;
border-color: bisque fuchsia red forestgreen;
}
#mydiv3 {
width: 50px;
height: 50px;
border-width: 100px;
border-style: solid;
border-color: bisque fuchsia red forestgreen;
}
#mydiv4 {
width: 0px;
height: 0px;
border-width: 100px;
border-style: solid;
border-color: bisque fuchsia red forestgreen;
}
#mydiv5 {
width: 0px;
height: 0px;
border-width: 100px;
border-style: solid;
border-color: transparent transparent red transparent;
}
</style>
</head>
<body>
<p> 中间有width,无height</p>
<div id="mydiv1">
</div>
<p> 中间无width,有height</p>
<div id="mydiv2">
</div>
<p> 中间有width,也有height</p>
<div id="mydiv3">
</div>
<p> 中间无width,无height</p>
<div id="mydiv4">
</div>
<p> 中间无width,无height,但是进行边框透明处理 得到一个三角形</p>
<div id="mydiv5">
</div>
</body>
</html>