移動端css佈局：不規則按鈕與自適應table佈局導航欄

時間 2019-11-19

原文原文鏈接

前幾天在w3cplus上看了關於css3的clip-path剪裁熟悉，當時就被這個東西吸引了，想到之前若是要作不規則圖形，要麼直接用圖片，要麼要用border加translate去製做三角形再拼起來。並且這些作法有不少問題，前者太耗資源要加圖片，後者不只麻煩並且製做出的圖形的點擊事件仍然會在整個矩形div中做用，沒法讓各類事件只在圖形區域有效。
然而有了clip-path後就輕鬆簡單多了。css

最近切圖的時候，美術師設計了一個帶小尖尖的按鈕......正好前幾天看完那篇文章，此次就實踐了一下，最後的效果圖以下：html

這是一個table佈局，左邊三個小div寫死寬度，右邊兩個按鈕根據內容自適應。那麼來看看是如何實現的吧。代碼以下：css3

<!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 自適應。web

而不規則按鈕的關鍵在於，外面套一層外衣作table-cell。而且使用紅色底色，這樣可讓內部的按鈕在裁剪後，背景爲紅色，出現和右邊按鈕無縫鏈接的效果。瀏覽器

並且爲剪裁後的按鈕添加hover，只在裁剪後的區域內有效哦！！！這是最棒的！微信

不過據說不一樣瀏覽器下對此表現不一樣，有待查看。佈局

另外這種clip-path的裁剪在微信瀏覽器上的表現也還沒作測試，後續有機會我會補上。(實際上是等項目上線再看看效果..)測試

發現最近特別愛用table佈局，感受有點萬能，基本上各類多列效果table均可以駕馭，若是不行就多套一個div，再不行再套總有辦法搞定。但相比於flex佈局更好的地方在於它兼容性比flex好太多。flex

前一陣子爲了寫微信瀏覽器上的相似佈局，用了flex，最後寫了n多兼容寫法才搞定了兼容問題。table佈局就簡單多了。scala