1.原理：利用border属性和两个元素的叠加，如下到第三幅是利用border做出了三角形，第四附图又做一个白色的小三角形叠加上去，使造成空心的效果。
2.代码
<!DOCTYPE html>
效果：
2.代码
<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css制作尖角</title>
</head>
<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;
}
#left_cusp {
}
#left_cusp .cusp01 {
left:-12px;
top:50px;
border-top:9px solid #fff;
border-bottom:9px solid #fff;
border-left:0px;
border-right:9px solid #1c7ecf;
}
#left_cusp .cusp02 {
left:6px;
top:-6px;
border-top:6px solid #1c7ecf;
border-bottom:6px solid #1c7ecf;
border-left:0px;
border-right:6px solid #fff;
}
#right_cusp {
}
#right_cusp .cusp01 {
right:-12px;
top:50px;
border-top:9px solid #fff;
border-bottom:9px solid #fff;
border-right:0px;
border-left:9px solid #1c7ecf;
}
#right_cusp .cusp02 {
right:6px;
top:-6px;
border-top:6px solid #1c7ecf;
border-bottom:6px solid #1c7ecf;
border-right:0px;
border-left:6px solid #fff;
}
#top_cusp {
}
#top_cusp .cusp01 {
left:100px;
top:-12px;
border-top:0px;
border-bottom:9px solid #1c7ecf;
border-right:9px solid #fff;
border-left:9px solid #fff;
}
#top_cusp .cusp02 {
left:-6px;
top:6px;
border-top:0px;
border-bottom:6px solid #fff;
border-right:6px solid #1c7ecf;
border-left:6px solid #1c7ecf;
}
#bottom_cusp {
}
#bottom_cusp .cusp01 {
left:100px;
bottom:-12px;
border-bottom:0px;
border-top:9px solid #1c7ecf;
border-right:9px solid #fff;
border-left:9px solid #fff;
}
#bottom_cusp .cusp02 {
left:-6px;
bottom:6px;
border-bottom:0px;
border-top:6px solid #fff;
border-right:6px solid #1c7ecf;
border-left:6px solid #1c7ecf;
}
</style>
<body>
<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>
</body>
</html>CSS制作尖角
778
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
