在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5  HTML/ 求問怎么用css3寫出這種類型的波浪線

求問怎么用css3寫出這種類型的波浪線

1、如圖，各路神仙，救助一下怎么用css3畫出如下的波浪線部分，有沒有相關(guān)的示例或者思路。
2、圖片描述

感激不盡！

回答
編輯回答
你好胸

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    div{
        width: 20px;
        height: 3px;
        transform:skew(40deg);
        display: inline-block;
    }
    .first{
        background: #384b59
    }
    .second{
        background: #5c3434
    }
</style>

</head>
<body>

<div class="first"></div>
<div class="second"></div>
<div class="first"></div>
<div class="second"></div>
<div class="first"></div>
<div class="second"></div>
<div class="first"></div>
<div class="second"></div>

</body>
</html>

2017年10月16日 02:10
編輯回答
巴扎嘿

中間一個(gè)矩形 div，兩邊用偽元素畫三角?

2017年2月15日 10:19
編輯回答
我甘愿

可以使用 linear-gradient 完成。
參考網(wǎng)址如下：linear-gradient

結(jié)合大家的意見和樓下朋友的幫助，再次修改的結(jié)果為下。（感謝）

圖片描述

<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>
2017年6月25日 07:34
編輯回答
我不懂

如果考慮兼容性，還是用 div 排列更為可靠。

2017年2月7日 10:02
編輯回答
膽怯
/* S 這里是容器的樣式 - 不需要理會(huì) */ 
        .dash-line {
            width: 100%; 
            height: 50px; 
        }
        /* E 這里是容器的樣式 - 不需要理會(huì) */ 
        /* S 這里是波浪線的樣式 - 重點(diǎn) */ 
        .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 這里是波浪線的樣式 - 重點(diǎn) */ 
<div class="dash-line"></div>
2018年4月22日 23:02