小编The*_*mer的帖子

CSS或SVG中的波形

我正在尝试使用CSS创建软波并且遇到一些麻烦.我现在正在使用border-radius创建波浪但它看起来更像云.我尝试使用,transform: translateZ(180deg);但div颜色是颠倒的.

这就是我想要的:

这就是我所拥有的:

.wave1 {
  left: 0%;
  margin-left: -50px;
}

.wave2 {
  margin-left: -69px;
}

.wave3 {
  margin-left: -69px;
}

.wave4 {
  margin-left: -69px;
}

.waves {
  width: 200%;
  clear: none;
  z-index: 100;
  position: absolute;
  margin-top: 200px;
  margin-left: -150px;
}

.waves div {
  float: left;
  width: 500px;
  height: 100px;
  border: solid 5px #000;
  border-color: transparent;
  border-radius: 70%/100px 100px 0 0;
  background-color: #fff;
}

.bottom-half {
  width: 100%;
  height: 50%;
  top: 70%;
  position: absolute; …

Run Code Online (Sandbox Code Playgroud)

css svg css3 css-shapes

The*_*mer

2017 07-11

9
推荐指数

1
解决办法

1万
查看次数