css - CSSで丸みを帯びた角を反転しますか？

Question

私はcssコードを持っています：

-moz-border-radius-topleft:50px;

結果が得られます：

このように与える可能性はありますか？

Answer 1

これを更新するだけで、複数の方法でできるようです。

Lea Verou がソリューションを投稿しました

これがボーダーイメージを使用した私のものです

ボーダー画像の使用

html

<div><img src="https://s3.amazonaws.com/resized-images-new/23292454-E6CD-4F0F-B7DA-0EB46BC2E548" /></div>

CSS

div {
    width: 200px;           
    border-width: 55px;
    -moz-border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat;
    -webkit-border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat;
    -o-border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat;
    border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat;
    margin: 50px auto;   
}

---

放射状グラデーションの使用

Lea Verou のソリューション

html

<div class="inner-round"></div>

CSS

.inner-round {
    background-image:
        radial-gradient(circle at 0 0, rgba(204,0,0,0) 14px, #c00 15px),
        radial-gradient(circle at 100% 0, rgba(204,0,0,0) 14px, #c00 15px),
        radial-gradient(circle at 100% 100%, rgba(204,0,0,0) 14px, #c00 15px),
        radial-gradient(circle at 0 100%, rgba(204,0,0,0) 14px, #c00 15px);
}

Answer 2

パス要素でsvgを使用してインライン化することもできます。

body{background:url('http://i.imgur.com/RECDV24.jpg');background-size:cover;}
svg{width:30%;}

<svg viewbox="0 0 10 10">
  <path d="M9 1 V9 H1 V3 Q3 3 3 1" fill="#fff"/>
</svg>

この例では、反転した丸いエッジに3 次ベジエ曲線を使用しています。

このアプローチでは、図形を画像 またはグラデーションで塗りつぶすこともできます。

body{background:url('http://i.imgur.com/RECDV24.jpg');background-size:cover;}
svg{width:30%;}

<svg viewbox="0 0 10 6.7">
  <defs>
    <clipPath id="clip">
      <path d="M9 1 V6.7 H1 V3 Q3 3 3 1" fill="#fff"/>
    </clipPath>
  </defs>
  <image xlink:href="http://i.imgur.com/qi5FGET.jpg" x="0" y="0" height="6.7" width="10" clip-path="url(#clip)"/>
</svg>

Answer 3

残念ながら、現在、公式または実装された CSS 仕様に基づく解決策はありません :(

ただし、他の人が追加したように、JS ライブラリまたは複雑な HTML/CSS 実装を使用して同じ効果を達成するために実行できる解決策 (またはチート) があります。画像を使用せずに OP よりもさらに複雑なコーナーを作成する方法を探しているときに、この問題に遭遇しました。

Webkit サイトにバグ (Feature Request) を提出しました - まだ提出されていないようです。

バグ 62458 - 機能のリクエスト: 逆の丸みを帯びたコーナー

Answer 4

CSSだけを使用してこの問題を解決する方法はいくつかありますが、背景のパターンがある場合は、背景の色に依存します（単色の方が簡単な場合）。少し複雑になる可能性があります。

ここでは、CSSで逆境界半径を作成する方法の基本的な例について説明します（ここ） 。これは、ボーダーのサイズのトリックを使用して内側を使用します。可能な限り、正しく機能させるために、いくつかのポジショニングを行う必要がある場合があります。特に、background-colorそれぞれにを指定する場合span。

4つのコーナーすべてが必要な場合はspan、div内ごとに個別のクラスを追加する必要があり、各クラスはコーナー、左上、右上などをシミュレートします。

Answer 5

いいえ。背景がしっかりしている場合は、おそらく css を使用してバイトを作成できます。
それ以外の場合は、以前に角を丸くするのと同じように、PNG を使用する以外にできる特別なことはありませんborder-radius。

Answer 6

after 要素を使用して実行できます。 このjsfiddleリンクを確認してくださいenter code here

Answer 7

実際には、次のような 1 つの方法があります。

<div style="background-color: red;height: 12px; width: 12px;">
    <div style="margin-top: 40px; height: 12px; width: 12px; moz-border-radius-topright: 12px;
        -webkit-border-top-right-radius: 12px; border-top-right-radius: 12px; background-color:#fff">
    </div>
</div>

ただし、@Domenic が言うように、しっかりした背景が必要です。そうしないと、次のようになります。

<div style=" background-color:#666">
  <div style="background-color: red;height: 12px; width: 12px;">
    <div style="margin-top: 40px; height: 12px; width: 12px; moz-border-radius-topright: 12px;
        -webkit-border-top-right-radius: 12px; border-top-right-radius: 12px; background-color:#fff">
    </div>
</div>

Answer 8

いいえ、ありません。