css制作尖角

例1：

<style>
	body {
		margin: 50px 0 0 50px;
	}	
	ul,li {
		padding: 0px;
		list-style: none;
		margin: 0;
	}	
	div {
		padding: 10px;
		border: 3px solid #1c7ecf;
		position: relative;
		margin: 10px;
		float: left;
		width: 150px;
		height: 100px;
	}	
	p {
		text-indent: 2em;
	}	
	.cusp01,.cusp02 {
		position: absolute;
		display: block;
		height: 0px;
		line-height: 0px;
	}	
	#left_cusp .cusp01 {
		left: -21px;
		top: 50px;
		border: 9px solid #1c7ecf;
		border-top-color: transparent;
		border-bottom-color: transparent;
		border-left-color: transparent;
	}	
	#left_cusp .cusp02 {
		left: -4px;
		top: -9px;
		border: 9px solid #fff;
		border-top-color: transparent;
		border-bottom-color: transparent;
		border-left-color: transparent;
	}
	#right_cusp .cusp01 {
		right: -21px;
		top: 50px;
		border: 9px solid #1c7ecf;
		border-top-color: transparent;
		border-bottom-color: transparent;
		border-right-color: transparent;
	}	
	#right_cusp .cusp02 {
		right: -4px;
		top: -9px;
		border: 9px solid #fff;
		border-top-color: transparent;
		border-bottom-color: transparent;
		border-right-color: transparent;
	}	
	#top_cusp .cusp01 {
		left: 100px;
		top: -21px;
		border: 9px solid #1c7ecf;
		border-top-color: transparent;
		border-right-color: transparent;
		border-left-color: transparent;
	}	
	#top_cusp .cusp02 {
		left: -9px;
		top: -4px;
		border: 9px solid #fff;
		border-top-color: transparent;
		border-right-color: transparent;
		border-left-color: transparent;
	}	
	#bottom_cusp .cusp01 {
		left: 100px;
		bottom: -21px;
		border: 9px solid #1c7ecf;
		border-bottom-color: transparent;
		border-right-color: transparent;
		border-left-color: transparent;
	}	
	#bottom_cusp .cusp02 {
		left: -9px;
		bottom: -4px;
		border: 9px solid #fff;
		border-bottom-color: transparent;
		border-right-color: transparent;
		border-left-color: transparent;
	}
</style>

例1：

<div id="left_cusp">
	<ul>
		<li>ffffffffffffffff</li>
		<li>ffffffffffffffff</li>
		<li>ffffffffffffffff</li>
		<li>ffffffffffffffff</li>
	</ul>
	<span class="cusp01"><span class="cusp02"></span></span>
</div>
<div id="right_cusp">
	<ul>
		<li>ffffffffffffffff</li>
		<li>ffffffffffffffff</li>
		<li>ffffffffffffffff</li>
		<li>ffffffffffffffff</li>
	</ul>
	<span class="cusp01"><span class="cusp02"></span></span>
</div>
<div id="top_cusp">
	<ul>
		<li>ffffffffffffffff</li>
		<li>ffffffffffffffff</li>
		<li>ffffffffffffffff</li>
		<li>ffffffffffffffff</li>
	</ul>
	<span class="cusp01"><span class="cusp02"></span></span>
</div>
<div id="bottom_cusp">
	<ul>
		<li>ffffffffffffffff</li>
		<li>ffffffffffffffff</li>
		<li>ffffffffffffffff</li>
		<li>ffffffffffffffff</li>
	</ul>
	<span class="cusp01"><span class="cusp02"></span></span>
</div>

例2：

.page{
    width:500px;
}
/* demo1 */
.demo1{
    border:2px solid #ccc;
	padding:10px;
	margin-bottom:20px;
	position:relative;
	-moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}
.demo1:before,.demo1:after{ 
	content:'';
	width:0;
	height:0;
	position:absolute;
}
.demo1:before{
    left:10px;
	bottom:-8px;
	border-top:8px solid #ccc;
	border-left:8px solid transparent;
	border-right:8px solid transparent;
}
.demo1:after{
    left:12px;
	bottom:-6px;
	border-top:8px solid #fff;
	border-left:6px solid transparent;
	border-right:6px solid transparent;
}
/* demo2 */
.demo2{
    border:2px solid #29B4F0;
	padding:10px;
	position:relative;
	margin-bottom:20px;
	-moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}
.demo2:before{
	content:'';
	width:8px;
	height:8px;
	position:absolute;
	left:20px;
	bottom:-7px;
	background-color:#fff;
	border:2px solid #29B4F0;
	border-width: 0 2px 2px 0;
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	transform:rotate(45deg);
}
/* demo3 */
.demo3{
    background-color:#B6F5FE;
	padding:10px;
	position:relative;
	margin-bottom:20px;
	-moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}
.demo3:before{ 
	content:'';
	width:0;
	height:0;
	position:absolute;
}
.demo3:before{
    left:10px;
	bottom:-18px;
	border-top:30px solid #B6F5FE;
	border-left:8px solid transparent;
	border-right:8px solid transparent;
	-webkit-transform:rotate(50deg);
	-moz-transform:rotate(50deg);
	-ms-transform:rotate(50deg);
	-o-transform:rotate(50deg);
	transform:rotate(50deg);
}
/* demo4 */
.demo4{
    background-color:#82AF11;
	padding:10px;
	color:#fff;
	position:relative;
	text-shadow:0 -1px 1px rgba(0,0,0,.2);
	-moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}
.demo4:before{
    content:'';
	width:100px;
	height:20px;
	background-color:#82AF11;
	position:absolute;
	bottom:-20px;
	left:200px;
}
.demo4:after{
    content:'';
	width:50px;
	height:20px;
	background-color:#fff;
	position:absolute;
	bottom:-20px;
	left:200px;
	border-radius:0 20px 0 0;
}
.demo4 > :first-child:before{
     content:'';
	width:50px;
	height:20px;
	background-color:#fff;
	position:absolute;
	bottom:-20px;
	left:250px;
	border-radius:20px 0 0 0;   
}


例2：

<div class="page">
			<p class="demo1">青，取之于蓝，而青于蓝；冰，水为之，而寒于水。
				<br />:before & after</p>
			<p class="demo2">青，取之于蓝，而青于蓝；冰，水为之，而寒于水。
				<br />:before & rotate</p>
			<p class="demo3">青，取之于蓝，而青于蓝；冰，水为之，而寒于水。
				<br />:before & rotate</p>
			<section class="demo4">
				<p>青，取之于蓝，而青于蓝；冰，水为之，而寒于水。
					<br />:before & :after</p>
			</section>
		</div>