4

css でこのような凹んだコーナーを作成することは可能ですか? はいの場合、どのようにしますか？

画像

4

5 に答える 5

9

Lea Verouには、これを行う方法の説明があります。

放射状グラデーションを使用することにより、負の半径を持つ丸みを帯びた角をシミュレートできます。これは、追加の要素をサポートしなくても実行できます。その少しトリッキー。

また、CSSグラデーションがサポートされていない場合は、単色の背景にフォールバックします。Firefox 3.6、最新のWebkit、そして（願わくば）Opera 11.10で動作します（グラデーションのサポートが予定されていると発表されました）。背景を追加して、-webkit-gradient()現在使用されているWebkitの実質的にすべてのバージョンで機能させることもできますが、警告します。簡単なことではなく、個人的に5分以上時間を費やすことを拒否します。標準的なもの。

これがそれらの実装のライブデモです。

于 2012-09-16T15:05:18.817 に答える
7

これは私がこれに取り組む方法の良い例です：

http://jsfiddle.net/x4wLf/

HTML：

<div class='concave'>
    <div class='topleftconcave'></div>
    <div class='botleftconcave'></div>
</div>

CSS：

 div.concave {
    background:blue;
    width:150px;
    height:120px;
    position:relative;
}
div.topleftconcave {
    position:absolute;
    background:white;
    width:25px;
    height:35px;
    border-bottom-right-radius:500px;
}
div.botleftconcave {
    position:absolute;
    background:white;
    width:25px;
    height:35px;
    bottom:0;
    left:0;
    border-top-right-radius:500px;
}
于 2012-09-16T14:56:02.147 に答える
2

HTMLに要素を追加したくない場合は、2つのコーナーのみをスタイル設定する必要があり、代わりに生成されたコンテンツを使用できるようにすることをお勧めします。

.concave {
    position: relative;
    width: 10em;
    height: 3em;
    line-height: 3em;
    margin: 1em auto;
    padding: 0.5em;
    background-color: #00f;
    color: #fff;
}

.concave::before {
    content: '';
    position: absolute;
    top: -1em;
    left: -1em;
    border: 1em solid #fff;
    border-radius: 1em;
}

.concave::after {
    content: '';
    position: absolute;
    bottom: -1em;
    left: -1em;
    border: 1em solid #fff;
    border-radius: 1em;
}
​

JSフィドルデモ。

于 2012-09-16T14:58:05.740 に答える
0

私が知っている唯一の方法は、それぞれが正の境界半径を持つ4つのdivを4つのコーナーに追加することです。

于 2012-09-16T14:55:47.863 に答える
0

CSS3 の border-image プロパティはどうですか? ここに素晴らしい記事があります：

http://css-tricks.com/understanding-border-image/

これは、IE 7-8 などの古いブラウザーをサポートしないことを意味しますが、それを受け入れるか、回避策を見つけることができれば、これはうまくいくでしょう。

私は最近、border-image を自分で使用して、この正確なことを行いました。

于 2012-09-16T15:38:19.957 に答える