内容を半円にしてください

Question

この画像のようにしたいだけです。私は言葉のプレスサイトを持っています。私はこの種のデザインのプラグインを見つけることができませんでした。私はCSS、JQUERY、htmlで試しましたが、 "成功しません"。どのように私はコンテンツと画像とアイコンでこのようなデザインを作ることができますか？

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

Answer 1

私はあなたを助けるかもしれないスニペットを作成したので、デザインが好きでした。あなたはちょうどイメージのURLとHTMLファイルのテキストを変更するテンプレートとして使用することができます。 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; 
 
}

<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>