最终效果：
CSS代码如下：
复制代码
代码如下:
#triangle-up {
width: 0
height: 0
border-left: 50px solid transparent
border-right: 50px solid transparent
border-bottom: 100px solid red
}
6、下三角
最终效果：
CSS代码如下：
复制代码
代码如下:
#triangle-down {
width: 0
height: 0
border-left: 50px solid transparent
border-right: 50px solid transparent
border-top: 100px solid red
}
7、左三角
最终效果：
CSS代码如下：
复制代码
代码如下:
#triangle-left {
width: 0
height: 0
border-top: 50px solid transparent
border-right: 100px solid red
border-bottom: 50px solid transparent
}
8、右三角
最终效果：
CSS代码如下：
复制代码
代码如下:
#triangle-right {
width: 0
height: 0
border-top: 50px solid transparent
border-left: 100px solid red
border-bottom: 50px solid transparent
}
9、左上三角
最终效果：
CSS代码如下：
复制代码
代码如下:
#triangle-topleft {
width: 0
height: 0
border-top: 100px solid red
border-right: 100px solid transparent
}
10、右上三角
最终效果：
CSS代码如下：
复制代码
代码如下:
#triangle-topright {
width: 0
height: 0
border-top: 100px solid red
border-left: 100px solid transparent
}
11、左下三角
最终效果：
CSS代码如下：
复制代码
代码如下:
#triangle-bottomleft {
width: 0
height: 0
border-bottom: 100px solid red
border-right: 100px solid transparent
}
12、右下三角
最终效果：
CSS代码如下：
复制代码
代码如下:
#triangle-bottomright {
width: 0
height: 0
border-bottom: 100px solid red
border-left: 100px solid transparent
}
13、平行四边形
如果你只要一条垂直线就设置这个DIV的边框线样式就可以了，样式代码：border-left:1px #000000 solid 这里的border-left是指这个DIV的左边边框，1px就是线的宽度，#000000是线的颜色（这里是黑色），solid是线的样式（这里是实线），整个DIV的代码可以这样写：<div style="width:200pxheight:500pxborder-left:1px #000000 solid"></div>float，css的一种属性，主要属性值为：left（左浮动）、none（不浮动）、right（右浮动）、inherit（继承父元素浮动），多用于网页排版。
float属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
扩展资料
CSS属性
1、整数和实数
在CSS中只能使用浮点小数，而不能像其他编程语言那样使用科学记数法表示实数，即1.2E3在CSS中将是不合法的。下面是几个正确的例子，整数：128、-313，实数：12.20、1415、-12.03。
2、长度量
相对长度单位有：em——当前字体的高度，也就是font.size属性的值；ex——当前字体中小写字母x的高度；Dx——一个像素的长度，其实际的长度由显示器的设置决定，比如在800木600的设置下，一个像素的长度就等于屏幕的宽度除以800。
3、百分数量（percentages）
百分数量就是数字加上百分号。显然，百分数量总是相对的，所以和相对长度量一样，百分数量不被子级元素继承。
参考资料来源：百度百科-CSS
参考资料来源：百度百科-FLOAT
