如何在CSS中创建全宽波

时间:2015-01-05 17:57:18

标签: html css css3 footer css-shapes

我的任务是建立一个网站。在这个网站上,他们的样式中有一个波形的页脚。见下图:

enter image description here

我可能因没有中风或黄线而逃脱。主要问题是他们希望这个“页脚波”是100%宽度。我在想可能有一个CSS解决方案吗?可能在css中重新创建形状?这可能吗?

3 个答案:

答案 0 :(得分:16)

您可以使用svg

body {
  margin: 0;
}
footer {
  position: absolute;
  width: 100%;
  height: 100px;
  bottom: 0;
  overflow: hidden;
}
<footer>
  <svg viewBox="0 -20 700 110" width="100%" height="110" preserveAspectRatio="none">
    <path transform="translate(0, -20)" d="M0,10 c80,-22 240,0 350,18 c90,17 260,7.5 350,-20 v50 h-700" fill="#CEB964" />
    <path d="M0,10 c80,-18 230,-12 350,7 c80,13 260,17 350,-5 v100 h-700z" fill="#00273F" />
  </svg>
</footer>

答案 1 :(得分:3)

如果你的页脚曾经变成一个复杂的图像并且很难用SVG绘制它并且它可能是循环的(几个重复的波而不是一个) - 你可以创建一个模板图像并重复它作为背景。下面的模板只是一个例子,并没有理想的粘合。

body {
  margin: 0;
}

footer {
  position: absolute;
  height: 100px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background-repeat: repeat-x;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAmAAAABaCAIAAACQd31lAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDFDRjM1Q0M5NTBGMTFFNDlBODdEMzY3RkIwNDAyQjUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDFDRjM1Q0Q5NTBGMTFFNDlBODdEMzY3RkIwNDAyQjUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0MUNGMzVDQTk1MEYxMUU0OUE4N0QzNjdGQjA0MDJCNSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0MUNGMzVDQjk1MEYxMUU0OUE4N0QzNjdGQjA0MDJCNSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqFfIEkAABzRSURBVHja7J3ZkhzH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');
}
<footer>
</footer>

答案 2 :(得分:1)

不是最干净的,但用纯css(伪效果)完成:

.wave {
  margin-top:50px;
  margin-left:-5%;
  position: relative;
  height: 70px;
  width: 110%;
  background: blue;
  transform: rotate(180deg);
  overflow:none;
}
.wave:before {
  content: "";
  display: block;
  position: absolute;
  border-radius: 100% 50%;
  width: 60%;
  height: 50px;
  background-color: white;
  right: -5px;
  top: 46px;
    border-top: 5px solid gold;
}
.wave:after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 100% 50%;
  width: 50%;
  height: 40px;
  background-color: blue;
  left: -2%;
  top: 40px;
  border-bottom: 5px solid gold;
}
<div class="wave"></div>