怎么用css3做出这种类型的波浪线

5回答

HUWWW

可以使用 linear-gradient 完成。参考网址如下：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>

0 0

湖上湖

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

0 0

ITMISS

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

0 0

天涯尽头无女友

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

0 0

慕森卡

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

0 0