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

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

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

<!DOCTYPE html>
<html>
<head>
	<title>demo</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<style type="text/css">
	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;
		line-height: 1rem;
		text-align: center;
		font-size: 0.36rem;
		border-right:1px solid;
	}
	.item2{
		background: #FE9402;
		width:100%;
		height: 100%;
		font-size: 0.36rem;
		-webkit-clip-path: polygon(95% 0%,95% 40%,100% 50%,95% 60%,95% 100%,0% 100%,0% 0%);
		color:#fff;
		line-height: 1rem;
		text-align: center;
	}
	.item2:hover
	{
	background-color:yellow;
	}
	.wrap{
		background: #EB252E;
		display: table-cell;
	}
	.item3{
		background: #EB252E;
		display: table-cell;
		font-size: 0.36rem;
		color:#fff;
		line-height: 1rem;
		text-align: center;
	}
	</style>
</head>
<body>
	<footer >
	<div class="item1">按钮1</div>
	<div class="item1">按钮2</div>
	<div class="item1">按钮3</div>
	<div class="wrap"><div class="item2">我是大按钮</div></div>
	<div class="item3">一个按钮</div>
	</footer>
</body>
</html>

布局的关键在于，footer百分百，display：table 让内容充满，小按钮宽度写死，display：table-cell。大按钮不写宽度，table-cell 自适应。

而不规则按钮的关键在于，外面套一层外衣做table-cell。并且使用红色底色，这样可以让内部的按钮在裁剪后，背景为红色，出现和右边按钮无缝连接的效果。

而且为剪裁后的按钮添加hover，只在裁剪后的区域内有效哦！！！这是最棒的！

不过听说不同浏览器下对此表现不同，有待查看。

另外这种clip-path的裁剪在微信浏览器上的表现也还没做测试，后续有机会我会补上。(其实是等项目上线再看看效果..)

发现最近特别爱用table布局，感觉有点万能，基本上各种多列效果table都可以驾驭，如果不行就多套一个div，再不行再套总有办法搞定。但相比于flex布局更好的地方在于它兼容性比flex好太多。

前一阵子为了写微信浏览器上的类似布局，用了flex，最后写了n多兼容写法才搞定了兼容问题。table布局就简单多了。