css样式中 border的应用

在以往的工作中，border多数情况下是用来给盒模型加描边。而如今，可以用border制作各种小形状。

1、三角形

html代码：

<div class="box">
	<span class="in-box"></span>
</div>

css代码：

.box{width: 400px; height: 300px; background: #F3961C; position: relative; margin: 50px auto;}
.in-box{position: absolute; left: 10px; top: -20px; width: 0; height: 0; border-width: 10px; border-style: solid; border-color: #fff #fff #F3961C;}

效果：

2、边框的宽度不一样（等腰三角形）

html代码：

<div class="box">
	<span class="in-box"></span>
</div>

css代码：

.box{width: 400px; height: 300px; background: #F3961C; position: relative; margin: 50px auto;}
.in-box{position: absolute; left: 10px; top: -40px; width: 0; height: 0; border-width: 20px 10px; border-style: solid; border-color: #fff #fff #F3961C;}

效果：

3、边框的宽度不一样（直角三角形）

html代码：

<div class="box">
	<span class="in-box"></span>
</div>

css代码：

.box{width: 400px; height: 300px; background: #F3961C; position: relative; margin: 50px auto;}
.in-box{position: absolute; left: 10px; top: -40px; width: 0; height: 0; border-width: 20px 10px; border-style: solid; border-color: #fff #F3961C #F3961C #fff;}

效果：

4、梯形

html代码：

<div class="box">
	<span class="in-box"></span>
</div>

css代码：

.box{width: 400px; height: 300px; background: #F3961C; position: relative; margin: 50px auto;}
.in-box{position: absolute; left: 10px; top: -50px; width: 10px; height: 10px; border-width: 20px 10px; border-style: solid; border-color: #fff #fff #F3961C #fff;}

效果：

注意：.in-box类中的宽度 、高度并不是0了。

5、圆形(工作中经常运用)

html代码：

<div class="box"></div>

css代码：

.box{width: 100px; height: 100px; background: #F3961C; border-radius: 50%; margin: 50px auto;}

效果：

6、制作半圆

html代码：

<div class="half"></div>

css代码：

.half{ width: 100px; height: 50px;border-radius: 50px 50px 0 0;background: red;margin: 10px 0;}

效果：

制作半圆技巧：

a. 制作上半圆和下半圆：元素的宽度值是高度值的2倍，而且圆角半径值为元素的高度值。

b. 制作左半圆和右半圆：元素的高度值是宽度值的2倍，而且圆角半径值为元素的宽度值。

7、哪边的边框未定义，哪边就是矩形。

html代码：

<div class="box"></div>

css代码：

.box{width: 0; height: 0; border-top: 50px solid #0F0; border-right: 50px solid #f00; border-left: 50px solid #09C; margin: 50px auto;}

效果：

注意：没有定义下边框，那么下边框就表现为矩形。

border制作的高级应用

1、高级应用1

html代码：

<div class="box">
    <span class="box-bot"></span>
    <span class="box-top"></span>
</div>

css代码：

.box{width:300px; padding:30px 20px; border:5px solid #F3961C; position:relative;}
.box span{width:0; height:0; font-size:0; overflow:hidden; position:absolute;}
.box span.box-bot{border-width:20px; border-style:solid; border-color:#F3961C transparent transparent; left:80px; bottom:-40px;}
.box span.box-top{border-width:20px; border-style:solid; border-color:#fff transparent transparent; left:80px; bottom:-33px;}

效果：

这个三角形跟上面的不同，需要2个子元素配合完成。

2、高级应用2

html代码：

<div class="box">
    <span class="box-bot"></span>
    <span class="box-top"></span>
</div>

css代码：

.box{width:300px; padding:30px 20px; margin-left:60px; background:#F3961C; position:relative;}
.box span{width:0; height:0; font-size:0; overflow:hidden; position:absolute;}
.box span.box-bot{border-width:20px; border-style:solid; border-color:#fff #F3961C #F3961C #fff; left:-40px; top:20px; }
.box span.box-top{border-width:10px 20px; border-style:solid; border-color:transparent #fff #fff transparent; left:-40px; top:40px;}

效果：