1、如圖，各路神仙，救助一下怎么用css3畫出如下的波浪線部分，有沒有相關的示例或者思路。2、感激不盡！
2 回答
當年話下
TA貢獻1890條經驗 獲得超9個贊
/* S 這里是容器的樣式 - 不需要理會 */
.dash-line {
width: 100%;
height: 50px;
}
/* E 這里是容器的樣式 - 不需要理會 */
/* S 這里是波浪線的樣式 - 重點 */
.dash-line {
background: linear-gradient(30deg, transparent 0, transparent 5px, blue 5px, blue 25px, transparent 25px, transparent 30px, red 30px, red 50px, transparent 50px, transparent 55px) repeat-x;
background-size: 100px 3px;
}
/* E 這里是波浪線的樣式 - 重點 */
<div class="dash-line"></div>
慕哥6287543
TA貢獻1831條經驗 獲得超10個贊
可以使用 linear-gradient 完成。
<div class="dash-line"></div>
<style>
? .dash-line {
? ? width: 500px;
? ? height: 100px;
? ? background: linear-gradient(30deg, transparent 0, transparent 5px, blue 5px, blue 25px, transparent 25px, transparent 30px, red 30px, red 50px, transparent 50px, transparent 55px) repeat-x;
? ? background-size: 100px 3px;
? ? background-color: #eee;
? ? background-position: bottom;
? }
</style>
- 2 回答
- 0 關注
- 887 瀏覽
添加回答
舉報
0/150
提交
取消