2016-07-29 14 views
0

このように半円を描く必要があります。https://codepen.io/xram/pen/thLsk タグの場合、divを追加できません。誰でもリンクでそれを行う方法を知っていますか?あなたのアンカータグにブロックを:DIVタグの上半円を描く

div{ 
    height:45px; 
    width:90px; 
    border-radius: 90px 90px 0 0; 
    -moz-border-radius: 90px 90px 0 0; 
    -webkit-border-radius: 90px 90px 0 0; 
    background:green; 
    } 
+0

'a'はインライン要素です。' display:block; 'がブロック要素になり、' div'として 'width'と' height'を設定することができます。 – blonfu

答えて

2

ため

これだけの仕事あなたは、ディスプレイを追加してみてください。この

a{ 
 
    display:block; 
 
    height:45px; 
 
    width:90px; 
 
    border-radius: 90px 90px 0 0; 
 
    -moz-border-radius: 90px 90px 0 0; 
 
    -webkit-border-radius: 90px 90px 0 0; 
 
    background:green; 
 
    
 
}
<a></a>

+0

こんにちは、ありがとうございます。テキストを中央に配置します。テキストは中央に配置しますが、円の上に配置します。 – pexichdu

+0

{text-align:center; 線高さ:45ピクセル;} –

1

を達成しようとしています。

<style> 
a { 
    height: 45px; 
    width: 90px; 
    border-radius: 90px 90px 0 0; 
    -moz-border-radius: 90px 90px 0 0; 
    -webkit-border-radius: 90px 90px 0 0; 
    background: green; 
    display: block; 
} 
</style> 
<body> 
<a></a> 
</body> 
2

Uはブロックまたはインラインブロック要素を作ることができます。このように:

a{ 
display: block; 
(or use inline-block) 
height:45px; 
width:90px; 
border-radius: 90px 90px 0 0; 
-moz-border-radius: 90px 90px 0 0; 
-webkit-border-radius: 90px 90px 0 0; 
background:green; 

}

1

DIVは

ブロック要素は、幅、高さ、などを持っている特性を有するインライン要素であるブロック要素

あります。これらのスタイルをインライン要素に適用する場合は、その要素をdisplay:blockとして作成して処理を進めます。