UI給的圖是這樣，想著用CSS實現下，試了一會兒，還是沒好的思路，還請各位指教。
2 回答
白板的微信
TA貢獻1883條經驗 獲得超3個贊
你這樣的最好還是切圖做
用css3也達不到一毛一樣的效果，
如果你很想要嘗試一下的話可以試試，不過邊緣不是順滑的感覺
<div class="jagged"></div>
.jagged {
height: 200px;
border: 2px solid #ccc;
border-bottom: none;
position: relative;
}
.jagged:after {
content: '';
display: block;
height: 10px;
background-size: 20px 20px;
background-repeat: repeat-x;
background-image: linear-gradient(135deg, transparent 45%, #ccc 55%, transparent 60%), linear-gradient(45deg, transparent 45%, #ccc 55%, transparent 60%);
position: absolute;
bottom: -9px;
left: 0;
right: 0;
}
順便一提，比較完美的鋸齒邊可以這樣寫，雖然不適合你的情況
.jagged {
height: 200px;
position: relative;
}
.jagged:after {
content: " ";
display: block;
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 36px;
background: -webkit-linear-gradient(#ccc 0%, transparent 0%),
-webkit-linear-gradient(135deg, #fff 33.33%, transparent 33.33%) 0 0%,
transparent -webkit-linear-gradient(45deg, #fff 33.33%, #ccc 33.33%) 0 0%;
background-repeat: repeat-x;
background-size: 0px 100%, 9px 27px, 9px 27px;
}
- 2 回答
- 0 關注
- 2567 瀏覽
添加回答
舉報
0/150
提交
取消