0

CSS3 で円を作成して、上下を少しカットすることは可能かどうか疑問に思っていました。

このような: ここに画像の説明を入力

誰かがこれで私を助けてくれたら素晴らしいかもしれません:D

  • やった
4

1 に答える 1

0

わかりました、方法を見つけました。コンテナ div を作成し、その中に円を配置する必要があります。コンテナを円より小さくし、オーバーフローを非表示にします。ここにJSフィドルがあります:

http://jsfiddle.net/CrD3q/1/

CSS:

.circle {
    position: relative;
    top: -6px;
    width: 108px;
    height: 108px;
    background: blue;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

.container{
    height: 96px;
    width: 108px;
    overflow:hidden;
}

HTML:

<div class="container">
    <div class="circle"></div>
</div>

これで始められるはずです。必要に応じて調整してください。

于 2013-07-04T19:04:45.117 に答える