在web前端里,用css怎么实现半角的效果?

html-css021

在web前端里,用css怎么实现半角的效果?,第1张

如果网页背景是白色的，可以设一个小的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>

.box{border-top-right-radius:20pxborder-bottom-right-radius:20px}

右上使用属性border-top-right-radius

右下使用属性border-bottom-right-radius