用内容制作半圈

Question

我只是想做这样的形象。我有一个单词新闻网站。我找不到任何这种设计的插件。我用CSS，JQUERY，html尝试了它，但是＆＃34;没有成功＆＃34;。如何使用内容，图像和图标进行此类设计？

＆＃13;

＆＃13;

<img src="https://i.stack.imgur.com/8IeQV.png">

＆＃13;

＆＃13;

＆＃13;

Answer 1

我喜欢这个设计因此创建了可能对你有用的代码片段。您可以将其用作模板，只需在html文件中更改图像URL和文本即可。随意调整css文件中的组件：）

＆＃13;

＆＃13;

.yellow-semi-circle {
  border-top-left-radius: 400px;
  border-top-right-radius: 400px;
  background: #FFEB3B;
  width: 800px;
  height: 400px;
}

.white-semi-circle {
  border-top-left-radius: 250px;
  border-top-right-radius: 250px;
  background: #FFF;
  width: 500px;
  height: 250px;
  position: relative;
  top: -250px;
  left: 150px;
}

.line-1 {
  border-color: #fff;
  border-style: solid;
  border-width: thick;
  position: relative;
  -ms-transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
  width: 400px;
  top: -355px;
  left: 20px;
}

.line-2 {
  border-color: #fff;
  border-style: solid;
  border-width: thick;
  position: relative;
  -ms-transform: rotate(60deg);
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg);
  width: 400px;
  top: -450px;
  left: 100px;
}

.line-3 {
  border-color: #fff;
  border-style: solid;
  border-width: thick;
  position: relative;
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  width: 400px;
  top: -500px;
  left: 200px;
}

.line-4 {
  border-color: #fff;
  border-style: solid;
  border-width: thick;
  position: relative;
  -ms-transform: rotate(120deg);
  -webkit-transform: rotate(120deg);
  transform: rotate(120deg);
  width: 400px;
  top: -480px;
  left: 300px;
}

.line-5 {
  border-color: #fff;
  border-style: solid;
  border-width: thick;
  position: relative;
  -ms-transform: rotate(150deg);
  -webkit-transform: rotate(150deg);
  transform: rotate(150deg);
  width: 400px;
  top: -415px;
  left: 380px;
}

.image-1 {
  width: 75px;
  height: 75px;
  position: absolute;
  top: 309px;
  left: 130px;
}

.image-2 {
  width: 75px;
  height: 75px;
  position: absolute;
  top: 193px;
  left: 191px;
}

.image-3 {
  width: 75px;
  height: 75px;
  position: absolute;
  top: 123px;
  left: 317px;
}

.image-4 {
  width: 75px;
  height: 75px;
  position: absolute;
  top: 123px;
  left: 447px;
}

.image-5 {
  width: 75px;
  height: 75px;
  position: absolute;
  top: 193px;
  left: 556px;
}

.image-6 {
  width: 75px;
  height: 75px;
  position: absolute;
  top: 309px;
  left: 623px;
}

.main-image {
  width: 300px;
  height: 300px;
  position: absolute;
  top: 183px;
  left: 264px;
}

.text-1 {
  position: absolute;
  top: 288px;
  width: 100px;
  left: 36px;
}

.text-2 {
  position: absolute;
  top: 136px;
  width: 100px;
  left: 116px;
}

.text-3 {
  position: absolute;
  top: 44px;
  width: 100px;
  left: 283px;
}

.text-4 {
  position: absolute;
  top: 44px;
  width: 100px;
  left: 450px;
}

.text-5 {
  position: absolute;
  top: 136px;
  width: 100px;
  left: 615px;
}

.text-6 {
  position: absolute;
  top: 288px;
  width: 100px;
  left: 699px;
}

＆＃13;

<div class=container>
  <div class="yellow-semi-circle"></div>
  <div class="white-semi-circle"></div>

  <!-- White Lines -->
  <div class="line-1"></div>
  <div class="line-2"></div>
  <div class="line-3"></div>
  <div class="line-4"></div>
  <div class="line-5"></div>

  <!-- Icons -->
  <img class="image-1" src="http://icons.iconarchive.com/icons/designbolts/free-multimedia/1024/Photo-icon.png" />
  <img class="image-2" src="http://icons.iconarchive.com/icons/designbolts/free-multimedia/1024/Photo-icon.png" />
  <img class="image-3" src="http://icons.iconarchive.com/icons/designbolts/free-multimedia/1024/Photo-icon.png" />
  <img class="image-4" src="http://icons.iconarchive.com/icons/designbolts/free-multimedia/1024/Photo-icon.png" />
  <img class="image-5" src="http://icons.iconarchive.com/icons/designbolts/free-multimedia/1024/Photo-icon.png" />
  <img class="image-6" src="http://icons.iconarchive.com/icons/designbolts/free-multimedia/1024/Photo-icon.png" />

  <!-- Center Image -->
  <img class="main-image" src="https://images.vexels.com/media/users/3/130342/isolated/preview/d6de6adeed24d5339ba865e05e7cfa6b-flat-cloud-icon-by-vexels.png" />

  <!-- Text -->
  <div class="text-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  <div class="text-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  <div class="text-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  <div class="text-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  <div class="text-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  <div class="text-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>

</div>

＆＃13;

＆＃13;

＆＃13;