.div1 {
width:100px
height:100px
background-color:transparent
border:4px solid red
border-radius:60px
margin-top:20px
}
.div2 {
width:60px
height:60px
background-color:#fff
z-index:1
border-radius:45px
position:absolute
top:0
left:80px
}
还有一个是用HTML5的canvas标签，不过得用JS
给你写个例子 <span style="width:0px height:0px line-height:0px font-size:0px border:10px transparent dashed border-left:10px solid red "></span>
手写的 实现效果是 一个红色三角 如果有错 你就老实点把每个边样式定义一遍。border-left:10px transparent dashed依此类推 只要将你想要写成三角的边变成10px solid red就可以了
如果网页背景是白色的，可以设一个小的span定在想实现半角的那个地方，设置宽高为0，给设置边框 例如<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>带缺角的水平菜单 </title>
<style>
#menu{ font-family:Arialfont-size:14px}
#menu a , #menu a:visited{ float:leftdisplay:blockposition:relativebackground:#c00color:#ffftext-decoration:nonepadding:6px margin:1px 0 0 1px }
#menu a span{ height:0width:0border-bottom:6px solid #c00border-left: 6px solid #fffposition:absolutetop:0left:0overflow:hidden}
#menu a:hover{ color:#333background:#f90}
#menu a:hover span{ border-bottom:6px solid #f90}
</style>
</head>
<body>
<div id="menu">
<a href="#"><span class="left"></span>Home</a>
<a href="#"><span class="left"></span>Contact Us</a>
<a href="#"><span class="left"></span>Web Dev</a>
<a href="#"><span class="left"></span>Web Design</a>
<a href="#"><span class="left"></span>Map</a>
</div>
</body>
</html>
