CSS3 を使用して「逆円」または「切り抜き円」効果を作成するにはどうすればよいですか?-CSSチュートリアル-php.cn

CSS3 を使用して「逆円」または「切り抜き円」効果を作成するにはどうすればよいですか?

Barbara Streisand

リリース： 2024-12-06 04:46:10

オリジナル

1059 人が閲覧しました

How can I create an

CSS 3 図形: "逆円" または "切り抜き円"

"逆円" または " に似た図形の作成CSS での「円の切り取り」はデザイン上の一般的な課題です。 CSS 3 テクニックを使用してこの効果を実現する方法の内訳は次のとおりです。

更新: CSS3 放射状背景グラデーションオプション

CSS3 放射状背景グラデーションをサポートするブラウザの場合 (Firefox など) 、Chrome)、円とその反転の間に透明な「ギャップ」を作成できます。切り抜き:

HTML:

<div>

ログイン後にコピー

CSS:

.inversePair {
  border: 1px solid black;
  display: inline-block;
  position: relative;
  height: 100px;
  text-align: center;
  line-height: 100px;
  vertical-align: middle;
}

#a {
  width: 100px;
  border-radius: 50px;
  background: grey;
  z-index: 1;
}

#b {
  width: 200px;
  padding-left: 30px;
  margin-left: -30px;
  border-left: none;
  -webkit-border-top-right-radius: 20px;
  -webkit-border-bottom-right-radius: 20px;
  -moz-border-radius-topright: 20px;
  -moz-border-radius-bottomright: 20px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  background-image: -moz-radial-gradient(
    -23px 50%,
    circle closest-corner,
    transparent 0,
    transparent 55px,
    black 56px,
    grey 57px
  );
}

ログイン後にコピー

元の回答:

Z インデックスの使用と

HTML:

<div>

ログイン後にコピー

CSS:

.inversePair {
  border: 1px solid black;
  background: grey;
  display: inline-block;
  position: relative;
  height: 100px;
  text-align: center;
  line-height: 100px;
  vertical-align: middle;
}

#a {
  width: 100px;
  border-radius: 50px;
}

#a:before {
  content: ' ';
  left: -6px;
  top: -6px;
  position: absolute;
  z-index: -1;
  width: 112px;
  height: 112px;
  border-radius: 56px;
  background-color: white;
}

#b {
  width: 200px;
  z-index: -2;
  padding-left: 50px;
  margin-left: -55px;
  overflow: hidden;
  -webkit-border-top-right-radius: 20px;
  -webkit-border-bottom-right-radius: 20px;
  -moz-border-radius-topright: 20px;
  -moz-border-radius-bottomright: 20px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}

#b:before {
  content: ' ';
  left: -58px;
  top: -7px;
  position: absolute;
  width: 114px;
  height: 114px;
  border-radius: 57px;
  background-color: black;
}

ログイン後にコピー

どちらの方法でも、画像を必要とせずに視覚的に魅力的な「逆円」効果が得られます。

以上がCSS3 を使用して「逆円」または「切り抜き円」効果を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。