【CSS】求问怎么用css3写出这种类型的波浪线

1、如图，各路神仙，救助一下怎么用css3画出如下的波浪线部分，有没有相关的示例或者思路。
2、图片描述

感激不尽！

回答：

可以使用 linear-gradient 完成。
参考网址如下：css3-linear-gradient-dashed-triangle-graph/" rel="nofollow">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>

回答：

/* 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>

回答：

<!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>

回答：

中间一个矩形 div，两边用伪元素画三角?

回答：

如果考虑兼容性，还是用 div 排列更为可靠。

以上是 【CSS】求问怎么用css3写出这种类型的波浪线 的全部内容， 来源链接： utcz.com/a/155245.html

回到顶部