如图的导航菜单效果是如何做出来的

html-css017

如图的导航菜单效果是如何做出来的,第1张

你好

可以使用 CSS 样式表,以下范例请参考:

也可参考网站: http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet

<style>

*{padding:0margin:0}

a{color:#ffffont-family: Arial, sans-seriftext-decoration:none}

a:hover{color:#000}

h2{position:relativeoverflow:hiddenfloat:leftmargin:10px 0width:175pxheight:32pxz-index:111}

div{position:absolutetop:16pxleft:0px}

h3{position:relativeoverflow:hiddenfloat:leftwidth:175pxheight:30px}

h3 p,h3 b{border:50px solidborder-color:#eee #eee #fff #fffwidth:150pxheight:100pxfloat:left}

h3 b{position:absolutetop:-90pxleft:32pxborder-color:#fff #fff #eee #eee}

h5{border:60px solidborder-color:#000 #fff #fff #fffwidth:150pxheight:100pxfloat:leftmargin:-10px 0 0 -20px}

p,b{border:50px solidborder-color:#bbb #bbb #fff #fffwidth:150pxheight:100pxfloat:left}

b{position:absolutetop:-90pxleft:32pxborder-color:#fff #fff #bbb #bbb}

span{position:absolutewidth:170pxtop:0pxleft:0pxfont-size:11pxline-height:30pxtext-align:centerz-index:5}

span:first-letter{color:#000font-size:18px}

</style>

<h2><span><a href="#">HOMEPAGE</a></span><p></p><b></b></h2>

<h2><span><a href="#">MYWORK</a></span><p></p><b></b></h2>

<h2><span><a href="#">CONTACT</a></span><p></p><b></b></h2>

<div>

<h3><p></p><b></b></h3>

<h3><p></p><b></b></h3>

<h3><p></p><b></b></h3>

</div>

<h5></h5>

你到这个地址里去看看，上面有详细的介绍，这个目前还没有浏览器支持这个属性

http://www.w3cplus.com/css3/css-shapes-breaking-rectangular-design.html