web-dev-qa-db-ja.com

CSSの丸い角を反転しますか？

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

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

私は結果を得ます：

rounded corner

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

inverted rounded corner

csssvgbordercss-shapes
30
Mubeen

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

Lea Verouが解決策を投稿しました

これはborder-imageを使用したものです

ボーダー画像を使用する

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);
}
17
Chris Burton

最新のブラウザでは、mask-imageを使用できます。

#aux-container {
  width: 100px;
  height: 100px;
  background: #f00;
  -webkit-mask-image: radial-gradient(circle 10px at 0 0, transparent 0, transparent 20px, black 21px);
}
<div id="aux-container"></div>

http://jsbin.com/eViJexO/1/

また、mask-box-imageを使用して同様の結果を得る方法について説明している http://www.html5rocks.com/en/tutorials/masking/Adobe/ もご覧ください。

16
Gajus

また、 inline svg と path element を使用することもできます。

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>

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

このアプローチでは、画像を画像またはグラデーションで塗りつぶすこともできます（-===-）：

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>
7
web-tiki

残念ながら、現在、公式または実装されたCSS仕様に基づくソリューションはありません:(

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

私はwebkitサイトでバグ（機能リクエスト）を提出しました-まだ提出されていないようです。

バグ62458-機能リクエスト：逆丸みのある角

5
Christopher Bull

プレーンな背景色の場合、実際にはできます。代わりに擬似要素とボックスシャドウを使用して背景色を描画します。これにより、親のコンテナーの背景が非表示にならず、実際に透けて見えます。

：before /：afterとbox-shadow :)を理解するブラウザが必要です...

IE8の場合、影の代わりに境界線を描画できます。 http://codepen.io/anon/pen/fFgDo

ボックスシャドウアプローチ： http://codepen.io/anon/pen/FwLnd

div {
  margin:2em; /* keep it away from sides to see result */
  padding:2em;/* for test to size it when empty */
  position:relative; /* reference to set pseudo element where you wish */
  overflow:hidden;/* you do not want the box-shadow all over the page */
}
div:before {
  content:'';
  position:absolute;
  width:80px;
  height:80px;
  top:-40px;
  left:-40px;
  border-radius:100%;
  box-shadow:0 0 0 2000px #1D005D;/* here draw the shadow inside its parent , maybe z-index will be required for content */
}

demo and visual of pseudo interaction

疑似要素は任意の形状を取ることができ、CSSを介して変換し、その要素の任意の場所に設定して、貫通穴の種類を描画します：例： http://codepen.io/gc-nomade/pen/nKAka

5
G-Cyr

これは radial gradient で行うことができます。

div {
  width: 20vw;
  height: 20vw;
  background: radial-gradient(circle at top left,transparent 4vw, darkblue 4.1vw);
}
<div></div>

おもしろいことに、複数の背景を定義することにより、追加の反転コーナーを追加できます-各コーナーに1つ：

div {
  width: 40vw;
  height: 40vw;
  position: relative;
  background-color: darkblue;
  --circle: radial-gradient(circle,white 8vw, darkblue 8.1vw);
}
div:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: var(--circle), var(--circle), var(--circle), var(--circle);
  background-size: 18vw 18vw;
  background-position: -40% -40%, 140% -40%, -40% 140%, 140% 140%;
  background-repeat: no-repeat;
}
<div></div>
3
Danield

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

CSSの逆ボーダー半径（ここ） を作成する方法の基本的な例をここで取り上げます。これは、内側を使用するためにボーダーのサイズのトリックを使用します。可能性を確認できるように、適切に動作させるために、いくつかの配置を行う必要がある場合があります。特に、spanごとにbackground-colorを指定した場合。

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

1
Jon Mifsud

いいえ。もし無地の背景がある場合、おそらくcssを使用してかみ傷を作成できます。
それ以外の場合は、PNGを使用して特別なことを行うことはできません。以前に丸い角を作成するようなものですborder-radius。

0
Kobi

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

<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>
0
Milox

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

0
Omkar Vaity