web-dev-qa-db-ja.com

CSSの波の境界線

私はあなたが何を考えているか知っています、境界の波、または要素の端の波について尋ねるこのような少なくとも100万の質問があります。ただし、別の質問があります。私が必要とするのは、 zigzag-Edge （英語ではない）と wave-Edge の組み合わせです。

より具体的に：これを作成する必要があります：

enter image description here

青い要素の上部は波状の境界線である必要があります。上部は透明であるため、下にある画像は「要素を通して」と表示されます。

これはCSSで可能ですか？これらのような複数の要素があり、異なる色（要素ごとに異なるエッジの色を意味する）があるため、単純に画像を使用しません。

csscss3bordercss-shapes
11
Sean

いくつかの擬似要素を使用して、そのような境界線を描くのは比較的簡単です。

まず、波の底を描きます。

.wave{
  background:
    linear-gradient(to right, sandybrown, chocolate);
  height: 50px;
  position: relative;
}
.wave::before{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  background-repeat: repeat;
  height: 10px;
  background-size: 20px 20px;
  background-image:
    radial-gradient(circle at 10px -5px, transparent 12px, maroon 13px);
}
<div class='wave'></div>

次に、他のすべての溝を別の擬似要素の背景で埋めます。この背景の幅は2倍なので、奇数の溝だけを埋めます。

.wave{
  background:
    linear-gradient(to right, sandybrown, chocolate);
  height: 50px;
  position: relative;
}
.wave::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  background-repeat: repeat;
  height: 15px;
  background-size: 40px 20px;
  background-image:
    radial-gradient(circle at 10px 15px, crimson 12px, transparent 13px);
}
<div class='wave'></div>

2つを組み合わせることで、望ましい効果が得られます。

.wave{
  background:
    linear-gradient(to right, sandybrown, chocolate);
  height: 50px;
  position: relative;
}
.wave::before{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  background-repeat: repeat;
  height: 10px;
  background-size: 20px 20px;
  background-image:
    radial-gradient(circle at 10px -5px, transparent 12px, aquamarine 13px);
}
.wave::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  background-repeat: repeat;
  height: 15px;
  background-size: 40px 20px;
  background-image:
    radial-gradient(circle at 10px 15px, aquamarine 12px, transparent 13px);
}
<div class='wave'></div>

flatter waveで更新されました。

.wave{
  background:
    linear-gradient(to right, sandybrown, chocolate);
  height: 50px;
  position: relative;  
}
.wave::before, .wave::after{
  border-bottom: 5px solid yellow;
}
.wave::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10px;
  background-size: 20px 40px;
  background-image:
    radial-gradient(circle at 10px -15px, transparent 20px, yellow 21px);
}
.wave::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 15px;
  background-size: 40px 40px;
  background-image:
    radial-gradient(circle at 10px 26px, yellow 20px, transparent 21px);
}
<div class='wave'></div>
52
woestijnrog

トライ

#wave {
    position: relative;
    height: 70px;
    width: 54px;
    background:#79C5BD none repeat scroll 0% 0%;float:left;margin-top:20px
}
#wave::after {
    content: "";
    display: block;
    position: absolute;
    border-radius: 100% 100%;
    height: 70px;
    background-color: #79C5BD;
    left: 0px;
    bottom: 27px;
    width: 60px;
}

#wave {
    position: relative;
    height: 70px;
    width: 54px;
    background:#79C5BD none repeat scroll 0% 0%;float:left;margin-top:20px
}
#wave::after {
    content: "";
    display: block;
    position: absolute;
    border-radius: 100% 100%;
    height: 70px;
    background-color: #79C5BD;
    left: 0px;
    bottom: 27px;
    width: 60px;
}
<div id="wave"></div>
<div id="wave"></div>
<div id="wave"></div>
<div id="wave"></div>
<div id="wave"></div>
<div id="wave"></div>
<div id="wave"></div>
<div id="wave"></div>
<div id="wave"></div>
<div id="wave"></div><div id="wave"></div>
1
Shantanu Verma