CSS ボックスに斜めの角を作成するにはどうすればよいですか?-CSSチュートリアル-php.cn

CSS ボックスに斜めの角を作成するにはどうすればよいですか?

Barbara Streisand

リリース： 2024-11-01 23:12:29

オリジナル

238 人が閲覧しました

How to Create a Slanted Corner in a CSS Box?

CSS ボックスへの斜めの角の適用

視覚的に印象的な効果を実現するために、CSS ボックスに斜めの角を導入することが望ましい場合があります。これにより、単純な四角形を動的で目を引く要素に即座に変換できます。

Cut-Corner Box の作成

CSS3 をサポートするブラウザの場合、polygon プロパティは、この課題に対する強力な解決策を提供します。。ただし、より広範なブラウザ互換性を実現するには、Slantastic 手法 (http://meyerweb.com/eric/css/edge/slantastic/demo.html) の方が優れた代替手段となる可能性があります。

Slantastic の実装

HTML:

<div class="cornered"></div>
<div class="main">Hello</div>

ログイン後にコピー

CSS:

.cornered {
    width: 160px;
    height: 0px;
    border-bottom: 40px solid red;
    border-right: 40px solid white;
}

.main {
    width: 200px;
    height: 200px;
    background-color: red;
}

ログイン後にコピー

追加オプション

透明な境界線を持つコーナーを作成するにはおよびテキストの場合は、次の代替アプローチを実装できます。

HTML:

<div class="outer">
    <div class="cornered">It's possible to put text up here, too...
    </div>
    <div class="main">Hello hello hello hello
    hello hello hello hello hello</div>
</div>

ログイン後にコピー

CSS:

.outer {
    background-color: #ccffff;
    padding: 10px;
    font-size: x-small;
}

.cornered {
    width: 176px;
    height: 0px;
    border-bottom: 40px solid red;
    border-left: 40px solid transparent;
}

.main {
    width: 200px;
    height: 200px;
    background-color: red;
    padding: 0 8px;
}

ログイン後にコピー

以上がCSS ボックスに斜めの角を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。