CSS绘制三角形

本节课通过使用CSS绘制一个三角形来给大家打开一个新的思路，CSS不仅可以用来实现网页布局和简单的页面效果设计，也可以设计一些logo、图标、简单的动画效果。一些简单的符号适合使用CSS替代图片，CSS相比图片的优势是文件非常小，同时也不用像图片每一张都要http请求一次浪费通信时间。

一个Web单页面应用界面的简单效果Web应用界面，里面的图标都是利用CSS完成，把项目常用的CSS图标代码专门放在css外部文件中，使用的时候直接引用样式类名.class。

绘制三角形(一)

1.绘制一个外边框

        .div {
            width: 200px;
            height: 200px;
            background-color: #8fbfff;
            border: 50px solid black;/*定义外边框*/
        }

2.重定义外边框样式

当外边框有了宽度，不知大家是否想一个问题，相邻的线条边界在哪，下面通过把外边框相邻侧边设置不同颜色来观察

    /*使用下面的语句替换上面的border定义*/
    border-bottom: 50px solid #555555;
    border-top: 50px solid #555555;
    border-right: 50px solid #333333;
    border-left: 50px solid #333333;

观察显示结果可以看出，对角线是两个边框线条的分界点

3.元素尺寸更改为0

试想一下，如果元素的宽高度无限接近于零，边框的显示效果梯形是否越接近于三角形，把div元素的宽度、高度设置为0，可以看到如下效果，每个边框侧边设置对应一个三角形，这时候你应该有绘制三角形的基本思路了，把一部分边框侧边颜色设置为透明，就可以呈现出一个三角形效果

    width: 0px;
    height: 0px;

4.三个边设置透明

前面讲解过颜色值除了十六进制表示，也可以使用rgb格式表示，rgba是CSS3新增标准，透明颜色可以表示为rgba(0,0,0,0),第四个参数a设为0全透明即可，其它三个参数无所谓，这样书写麻烦，可以使用关键词transparent来代替。

    <style>
        .div{
            width: 0px;
            height: 0px;
            border-bottom: 50px solid #555555;
            border-top: 50px solid transparent;
            border-right: 50px solid transparent;
            border-left: 50px solid transparent;
        }
    </style>

border-top宽度设为0

查看上面的三角形可以看到，虽然其他三个三角形影藏掉了，但是仍然占用位置，可以把底部border-bottom对面的顶部边线border-top宽度设置为0，boder的宽度默认就是0，设置为0就意味着不定义即可，效果如下

    <style>
        .div{
            width: 0px;
            height: 0px;
            border-bottom: 50px solid #555555;
            border-right: 50px solid transparent;
            border-left: 50px solid transparent;
        }
    </style>

测试

赋予边框不同的宽度(顺序：top——right——left)

25——25——25 50——25——25 25——25——50 25——50——50

注意

块元素默认的宽度是100%，必须写width:0px不能像边框宽度为0的时候可以不写，不过如果你把块元素转化为行内块元素就不存在这个问题，一般使用CSS设计图标也是要把块元素转化为行内块元素，行内块元素的特点前面说过和普通汉字字符类似可以在一行排列，同时又具备宽高度边距等属性。

结论

使用外边框的三个边线可以完成任何边长三角形的的制作，自然也包括特殊的直角三角形和等腰、等边三角形，以后使用的时候直接复制、修改下面代码即可。

     <style>
        .div{
            /*等腰三角形*/
            display: inline-block;/*设置元素为行内块元素*/
            border-bottom: xpx solid #555555;/*变量x为三角形高度*/
            border-right: ypx solid transparent;/*三角形的底边长度为2y*/
            border-left: ypx solid transparent;
        }
    </style>

      <style>
        .div{
            /*任意边长三角形*/
            display: inline-block;/*设置元素为行内块元素*/
            border-bottom: xpx solid #555555;/*变量x为三角形高度*/
            border-right: ypx solid transparent;/*变量y为底边右半部分*/
            border-left: zpx solid transparent;/*变量z为底边左半部分*/
        }
    </style>

绘制三角形(二)

源码下载

下面来测试两条边线来合成三角形

1.定义边框两条相邻边线

    <style>
        .div{
            width: 200px;
            height: 200px;
            border-top: 50px solid #555555;
            border-right: 50px solid #333333;
        }
    </style>

2.元素尺寸更改为0

试想一下，如果元素的宽高度无限接近于零，边框的显示效果是否仅仅剩下右上角

    <style>
        .div{
            width: 0px;
            height: 0px;
            border-top: 50px solid #555555;
            border-right: 50px solid #333333;
        }
    </style>

3.一个边框设置为透明

    <style>
        .div{
            width: 0px;
            height: 0px;
            border-top: 50px solid #555555;
            border-right: 50px solid transparent;
        }
    </style>

测试

尝试更改边框border-top或 border-right的值，看看能否得到各种直角三角形。

结论

使用外边框两个侧边可以完成任何直角三角形的创建

    <style>
        .div{
            /*直角三角形*/
            display: inline-block;
            border-top: xpx solid #555555;/*直角边长x*/
            border-right: ypx solid transparent;/*直角边长y*/
        }
    </style>

绘制一个箭头

利用上面的结论绘制一个箭头，箭头是一个等腰三角形，然后利用CSS3的transform属性旋转三角形90度，完整代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div0{
            /*绘制直线*/
            display: inline-block;/*设置元素为行内块元素*/
            width: 100px;
            height: 2px;
            background-color: black;
            vertical-align: middle;/*元素中线与父元素中线对齐*/
        }
        .div1{
            /*绘制箭头*/
            display: inline-block;/*设置元素为行内块元素*/
            border-bottom: 20px solid black;
            border-right: 8px solid transparent;
            border-left: 8px solid transparent;
            transform: rotate(90deg);/*三角形旋转变换90度*/
            vertical-align: middle;/*元素中线与父元素中线对齐*/
        }
    </style>
</head>
<body>
<!--&lt;!&ndash;&ndash;&gt;消除行内块元因空格产生的bug-->
     <div class="div0"></div><!--
     --><div class="div1"></div>
</body>
</html>

transform属性

W3c

值	含义	表达式
rotate(度数deg)	2D旋转	transform: rotate(90deg);//旋转90度
scale(x,y)	2D缩放	transform: scale(2,3);//x方向放大2倍，y方向放大3倍
translate(xpx,ypx)	2D平移	transform: translate(20px,30px);//二维坐标系平移，像右平移20px向下，向下平移30px

案例二

给《表单form》本节课的登录窗口左上角添加一个三角形，完成源码下载