CSS3シェイプを丸く作成するには？

Question

私はCSSで角丸の多くを作成することができます知っているが、私はそれは、フォントのためのスタイリングを必要とし、唯一の左の隅に向かっていない。この

ようなものを作成したことがありませんこのようにすることは可能でしょうか？

私はこのような月を作ることができると知っています、多分これは方法ですか？

#moon { 
width: 80px; 
height: 80px; 
border-radius: 50%; 
box-shadow: 15px 15px 0 0 red; 
} 

擬似クラスの前でなければならないと思いますか？ 私の写真のようにするにはどうすればいいですか？

Answer 1

私はあなたがこの

jsfiddle

のようなものだけで作成し、要素:beforeで、それが楕円形作りをしたいと思います。

楕円形にするには、border-radius:100%;を設定する必要があります。この要素は四角形ではありません。正方形ではありません。

などのマイナーな位置調整があります。このソリューションは、あなたの要素は、（この場合はbodyに）配置されているコンテナのbackground-colorを動作させるための

は:before要素のbackground-color

body { 
 
    background:#fff; 
 
} 
 

 
h2 { 
 

 
color:#fff; 
 
font-size:20px; 
 
padding:10px; 
 
width:200px; 
 
text-align:right; 
 
background:blue; 
 
text-transform:uppercase; 
 
position:relative; 
 

 
} 
 

 
h2:before { 
 
    position:absolute; 
 
    content:""; 
 
    background:#fff; 
 
    height:120%; 
 
    width:50px; 
 
    border-radius: 100%; 
 
    left:-25px; 
 
    top:-10%; 
 
}

<h2> 
 
Predictions 
 
</h2>

Answer 2

と同じにする必要があります余分な要素または疑似要素なしでbackgroundの要素にradial-gradientを使用することができます。

.shape { 
 
    width: 200px; 
 
    height: 50px; 
 
    padding: 0 20px; 
 

 
    line-height: 50px; 
 
    color: #ffffff; 
 
    text-align: right; 
 
    text-transform: uppercase; 
 
    font-size: 20px; 
 

 
    background: radial-gradient(circle 26px at 0% 50%, transparent, transparent 25px, #0000ff); 
 
}

<div class="shape">Predictions</div>

よりオーバー、あなたが必要な任意の円弧を取得するためにradial-gradientのパラメータを指定して再生することができます：

.shape { 
 
    width: 200px; 
 
    height: 50px; 
 
    padding: 0 20px; 
 

 
    line-height: 50px; 
 
    color: #ffffff; 
 
    text-align: right; 
 
    text-transform: uppercase; 
 
    font-size: 20px; 
 

 
    background: radial-gradient(circle 41px at -13% 50%, transparent, transparent 40px, #0000ff); 
 
}

<div class="shape">Predictions</div>

をjsFiddleをご覧ください。