可以使用 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
Codepen是一个非常了不起的网站，也是全球web前端开发人员的圣地!我搜索了一些时下最好最流行的codepen(仅限于HTML和CSS)。如果你能把它们融入到设计中去，那么就会大大节省很多时间。
在下面的例子中你会看到各式各样的片段，HTML
陈列，登录方式，垂直菜单，甚至时下最流行的主题：扁平化设计(扁平化图像，扁平化按钮形状，扁平化用户界面要素等)。好好欣赏这些精选的代码片段吧，如果现在没时间看完所有的代码例子，那就保存下来以备不时之需吧。
CSS3
Working
Clock
这是一个纯css3时钟。它使用css动画还有图形，没有使用任何图片或者是js
CSS3
Pricing
Table
CSS
Loader
Pure
CSS3
MacBook
Air
with
Thunderbird
Display
and
Keyboard
Button
Concept
CSS3
Loading
Animation
Pure
CSS3
Vertical
Menu
with
Hover
Effect
CSS3
Stamp
effect
using
radial
gradients
I
Love
Blur
Social
Navigation
Login
Calendar
Social
Footer
Parallax
Landscape
CSS3
Thermometer
CSS-Only
Responsive
Layout
with
Smooth
Transitions
Flat
CSS3
Weather
Widget
Flat
Responsive
Sliding
Boxes
Tiny
CSS3
Round
Breadcrumb
CSS3
Hover
Effect
using
:after
Psuedo
Element
Flat
UI
Elements
CSS
Flat
Button
Shapes
UI
Flat
Icons
CSS
