用边框实现各种形状

用边框实现各种形状

首先了解一下边框的基本属性

border:是一个复合属性

1. border-color：边框颜色
   默认值是和文字颜色相同
   可以用英文（如red，green）/#ffffff（可以简写成#fff）/rgb()
2. border-width：边框的宽度
   value+px；
   默认值大概在2.4px左右
3. border-style：边框的样式
   solid 实线
   deshed 虚线
   dotted 点状线
   doule 双实线
   none 无
   默认值是 none

一.实现一个三角形

思路：高度和宽度都设置为0；改变一下四边的颜色就可以看到四个三角形了。代码如下：

div{
	width: 0;
   	height: 0;
    border: 20px solid;
    border-color: purple palegreen palevioletred peru;
    }

之后边框颜色设置为透明或者是改变边框的宽度就可以只显示一个三角形了。

1. 改变透明度(只是隐藏了底部颜色还是会占位的）

div{
            width: 0;
            height: 0;
            border: 20px solid;
            border-color: purple transparent transparent transparent;
        }

2.改变边框宽度（不占位的方法)

div{
            width: 0;
            height: 0;
            border-style:solid;
            border-color: purple transparent palevioletred transparent;
            border-width: 20px 20px 0px 20px;
        }

实现一个梯形

1.只写宽度

div{
            width: 20px;
            height: 0px;
            border-style:solid;
            border-color: purple palegreen palevioletred peru;
            border-width: 20px;
        }

2.只写高度

3.加上宽度和高度

4.参考第一条实现三角形的代码，实现梯形

div{
            width: 20px;
            height: 0px;
            border-style:solid;
            border-color: purple transparent transparent transparent;
            border-width: 20px;
        }

实现大风车

代码如下：

 *{
            padding: 0;
            margin: 0;
        }
        #box{
            width: 400px;
        }
        .box1{
            width: 0;
            height: 0;
            float: left;
            border-width: 100px;
            border-color: transparent transparent  yellow transparent;
            border-style: solid;
            
        }
        .box2{
            width: 0px;
            height: 0px;
            float: left;
            border-width: 100px;
            border-color: transparent transparent  transparent yellow ;
            border-style: solid;
            
        }
        .box3{
            width: 0px;
            height: 0px;
            float: left;
            border-width: 100px;
            border-color:  transparent yellow transparent  transparent ;
            border-style: solid;
            
        }
        .box4{
            width: 0px;
            height: 0px;
            float: left;
            border-width: 100px;
            border-color: yellow transparent  transparent  transparent  ;
            border-style: solid;
            
        }

<div id="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    </div>

        .box1{
            width: 50px;
            height: 200px;
            background: blue;
            float: left;
        }
        
        .box2{
            width: 0px;
            height: 0px;
            float: left;
            border-width: 100px 0px 100px 100px;
            border-color: transparent transparent  transparent blue ;
            border-style: solid;
            background: red;
        }
        
        .box3{
            width: 0px;
            height: 0px;
            float: left;
            border-width: 100px 0px 100px 100px;
            border-color: transparent transparent  transparent red ;
            border-style: solid;
            background: yellow;
        }
        .box4{
            width: 0px;
            height: 0px;
            float: left;
            border-width: 100px 0px 100px 100px;
            border-color: transparent transparent  transparent yellow ;
            border-style: solid;
            background: green;
        }
        .box5{
            width: 0px;
            height: 0px;
            float: left;
            border-width: 100px 0px 100px 100px;
            border-color: transparent transparent  transparent green ;
            border-style: solid;
            background: pink;
        }
        .box6{
            width: 0px;
            height: 0px;
            float: left;
            border-width: 100px 0px 100px 100px;
            border-color: transparent transparent  transparent pink ;
            border-style: solid;
        }

	<div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    <div class="box6"></div>

代码如下：

*{
            padding: 0;
            margin: 0;
        }
        #box{
            width: 400px;
        }
        .box1{
            width: 50px;
            height: 0px;
            float: left;
            border-width: 100px 0 100px 100px;
            border-color: transparent transparent  red transparent;
            border-style: solid;
            
        }
        .box2{
            width: 0;
            height: 50px;
            float: left;
            margin-top: 50px;
            border-width: 100px 100px 0 100px;
            border-color: transparent transparent transparent blue;                 
            border-style: solid;
        }
        .box3{
            width: 0px;
            height: 50px;
            float: left;
            border-width: 0px 100px 100px 50px;
            border-color: transparent yellow transparent transparent;
            border-style: solid;
                    
        }
        .box4{
            width: 50px;
            height: 50px;
            float: left;
            border-width: 100px 100px 50px 0px;
            border-color: green transparent transparent transparent;
            border-style: solid;
        }

<div id="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    </div>