通过css来设计个性的尖角图层效果，这里有几种效果供您选择，这是很少用到的一种网页特效，需要的时候可以参考一下这个例子。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>css制作几款个性尖角箭头图层效果_武鸣人</title>
<style type="text/css">
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;
}
#wuming_ren {
}
#wuming_ren .cusp01 {
left:-12px;
top:50px;
border-top:9px solid #fff;
border-bottom:9px solid #fff;
border-left:0px;
border-right:9px solid #1c7ecf;
}
#wuming_ren .cusp02 {
left:6px;
top:-6px;
border-top:6px solid #1c7ecf;
border-bottom:6px solid #1c7ecf;
border-left:0px;
border-right:6px solid #fff;
}
#www_wuming_ren {
}
#www_wuming_ren .cusp01 {
right:-12px;
top:50px;
border-top:9px solid #fff;
border-bottom:9px solid #fff;
border-right:0px;
border-left:9px solid #1c7ecf;
}
#www_wuming_ren .cusp02 {
right:6px;
top:-6px;
border-top:6px solid #1c7ecf;
border-bottom:6px solid #1c7ecf;
border-right:0px;
border-left:6px solid #fff;
}
#wuming {
}
#wuming .cusp01 {
left:100px;
top:-12px;
border-top:0px;
border-bottom:9px solid #1c7ecf;
border-right:9px solid #fff;
border-left:9px solid #fff;
}
#wuming .cusp02 {
left:-6px;
top:6px;
border-top:0px;
border-bottom:6px solid #fff;
border-right:6px solid #1c7ecf;
border-left:6px solid #1c7ecf;
}
#my_wumingren {
}
#my_wumingren .cusp01 {
left:100px;
bottom:-12px;
border-bottom:0px;
border-top:9px solid #1c7ecf;
border-right:9px solid #fff;
border-left:9px solid #fff;
}
#my_wumingren .cusp02 {
left:-6px;
bottom:6px;
border-bottom:0px;
border-top:6px solid #fff;
border-right:6px solid #1c7ecf;
border-left:6px solid #1c7ecf;
}
</style>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<div id="wuming_ren">
<ul>
<li><a href="https://www.wuming.ren">武鸣人</a>欢迎您！</li>
<li><a href="https://www.wuming.ren">武鸣人</a>欢迎您！</li>
<li><a href="https://www.wuming.ren">武鸣人</a>欢迎您！</li>
<li><a href="https://www.wuming.ren">武鸣人</a>欢迎您！</li>
</ul>
<span class="cusp01"><span class="cusp02"></span></span>
</div>
<div id="www_wuming_ren">
<ul>
<li><a href="https://www.wuming.ren">武鸣人</a>欢迎您！</li>
<li><a href="https://www.wuming.ren">武鸣人</a>欢迎您！</li>
<li><a href="https://www.wuming.ren">武鸣人</a>欢迎您！</li>
<li><a href="https://www.wuming.ren">武鸣人</a>欢迎您！</li>
</ul>
<span class="cusp01"><span class="cusp02"></span></span>
</div>
<div id="wuming">
<ul>
<li><a href="https://www.wuming.ren">武鸣人</a>欢迎您！</li>
<li><a href="https://www.wuming.ren">武鸣人</a>欢迎您！</li>
<li><a href="https://www.wuming.ren">武鸣人</a>欢迎您！</li>
<li><a href="https://www.wuming.ren">武鸣人</a>欢迎您！</li>
</ul>
<span class="cusp01"><span class="cusp02"></span></span> </div>
<div id="my_wumingren">
<ul>
<li><a href="https://www.wuming.ren">武鸣人</a>欢迎您！</li>
<li><a href="https://www.wuming.ren">武鸣人</a>欢迎您！</li>
<li><a href="https://www.wuming.ren">武鸣人</a>欢迎您！</li>
<li><a href="https://www.wuming.ren">武鸣人</a>欢迎您！</li>
</ul>
<span class="cusp01"><span class="cusp02"></span></span>
</div>
</body>
</html>本文来自武鸣人网站，转载请注明出处