css3导航栏自适应布局,移动端css布局：不规则按钮与自适应table布局导航栏

前几天在w3cplus上看了关于css3的clip-path剪裁熟悉，当时就被这个东西吸引了，想到以前如果要做不规则图形，要么直接用图片，要么要用border加translate去制作三角形再拼起来。而且这些做法有很多问题，前者太耗资源要加图片，后者不仅麻烦而且制作出的图形的点击事件仍然会在整个矩形div中作用，无法让各种事件只在图形区域有效。

然而有了clip-path后就轻松简单多了。

最近切图的时候，美术师设计了一个带小尖尖的按钮......正好前几天看完那篇文章，这次就实践了一下，最后的效果图如下：

这是一个table布局，左边三个小div写死宽度，右边两个按钮根据内容自适应。那么来看看是如何实现的吧。代码如下：

demo

html,body{

font-size:50px;

}

*{

border:0;

padding: 0;

margin:0 ;

}

footer{

width:100%;

height: 1rem;

display: table;

}

.item1{

width:1rem;

height: 1rem;

display: table-cell;