我只是想做这样的形象。我有一个单词新闻网站。我找不到任何这种设计的插件。我用CSS,JQUERY,html尝试了它,但是"没有成功"。如何使用内容,图像和图标进行此类设计?
<img src="https://i.stack.imgur.com/8IeQV.png">
&#13;
答案 0 :(得分:1)
我喜欢这个设计因此创建了可能对你有用的代码片段。您可以将其用作模板,只需在html文件中更改图像URL和文本即可。随意调整css文件中的组件:)
.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;