コーティングの事

円を円形に囲むCSS

 

基本

タイトルが分かり辛いですがw

こういう感じの奴です

○HTML


<div class="navbar">
<div class="box">
<p>ホーム</p>
</div>
<div class="box">
<p>会社概要</p>
</div>
<div class="box">
<p>良くある質問</p>
</div>
<div class="box">
<p>アクセス</p>
</div>
<div class="box2">
<p>   </p>
</div>
<div class="box">
<p>お客様の声</p>
</div>
<div class="box">
<p>私達について</p>
</div>
<div class="box">
<p>採用情報</p>
</div>
<div class="box">
<p>お問い合わせ</p>
</div>

○CSS

*{
box-sizing: border-box;
}

.navbar{
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width:30%;
}

.box{
width:150px;
height: 150px;
border-radius: 50%;
background: black;
margin: 8px;
}

.box p{
text-align: center;
margin-top: 40%;
color:white;
}

.box2{
width:25%;
border-radius: 500px;
background: black;
margin: 8px;
background-color: white;
}

真ん中の空洞は

display:noneで指定すると、詰めて表示されてしまうために

背景と色を一致させて、強引に消してます

ナビゲーションバーとかに使えるんじゃないでしょうか?

応用編

ででん。花びら風です

○HTML

<div class="navbar">
<div class="box3">
<p>ホーム</p>
</div>
<div class="box">
<p>会社概要</p>
</div>
<div class="box4">
<p>良くある質問</p>
</div>
<div class="box">
<p>アクセス</p>
</div>
<div class="box2">
<p>   </p>
</div>
<div class="box">
<p>お客様の声</p>
</div>
<div class="box4">
<p>私達について</p>
</div>
<div class="box">
<p>採用情報</p>
</div>
<div class="box3">
<p>お問い合わせ</p>
</div>

○CSS

*{
box-sizing: border-box;
}
.navbar{
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width:30%;
}

.box{
width:150px;
height: 150px;
border-radius: 50% ;
background: #4e54c8; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #8f94fb, #4e54c8); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #8f94fb, #4e54c8); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
margin: 8px;
}

.box3{
width:150px;
height: 150px;
border-radius: 30% 70% 40% 60% / 0% 100% 0% 100% ;
background: #4e54c8; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #8f94fb, #4e54c8); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #8f94fb, #4e54c8); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
margin: 8px;
}

.box4{
width:150px;
height: 150px;
border-radius: 100% 0% 100% 0% / 70% 30% 60% 40% ;
background: #4e54c8; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #8f94fb, #4e54c8); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #8f94fb, #4e54c8); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
margin: 8px;
}

.navbar p{
text-align: center;
margin-top: 40%;
color:white;
font-weight: bold;
}

.box2{
width:25%;
border-radius: 500px;
background: black;
margin: 8px;
background-color: white;
}

border-radiusは意外に融通が利きます。このツールで作ってます://9elements.github.io/fancy-border-radius/

CSSグラデーションはこっち

://uigradients.com

良かったら使ってみてください