如何使用CSS制作派对横幅？ （如下图所示）

Question

我要制作的半圈横幅

我希望在我的网站上做到这一点＆＃39;主页，像装饰，但不一定在固定的位置。

谢谢大家！

Answer 1

只需border-radius: 50%;

.decoration {
  position: absolute;
  left: 0;
  top: -45px;
  overflow: hidden;
  width: 100%;
  white-space: nowrap;
  font-size: 0;
}
.decoration span {
  display: inline-block;
  width: 100px;
  height: 80px;
  border-radius: 50%;
  background-color: red;
}
.decoration span:nth-child(2n+2) {
  background-color: blue;
}
.decoration span:nth-child(3n+3) {
  background-color: green;
}

<div class="decoration">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

其他解决方案是使用具有所需图案的重复图像。

Answer 2

使用以下代码：

span{ 
    float:left;
    height:45px;
    width:90px;
    border-radius: 90px 90px 0 0;
   -moz-border-radius: 90px 90px 0 0;
   -webkit-border-radius: 90px 90px 0 0;
    background:blue;
    transform: rotate(180deg);
}

<div >
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  
</div>

Answer 3

你必须得到一个半圆圈的图像。然后在你的身体上加上这样的东西：

body {
  background-image: url("paper.gif");
  background-repeat: repeat-y;
}