CSSの平行四辺形とひし形の変換-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSの平行四辺形とひし形の変換

高洛峰

Nov 30, 2016 pm 04:01 PM

css

*以下のテクニックはすべて、Lea Verou 著の「CSS Secrets」から派生したものです

Parallelogram

平行四辺形の構築は、skew() (skew で使用される座標系) の変形属性を通じて長方形を斜めに引っ張ることによって取得できます。、垂直方向が X 軸、水平方向が Y 軸であり、一般的な座標系とは逆です）。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .location{
            position: relative;
            top: 150px;
            left: 150px;
        }
         .button{
             color: white;
             background-color: #51bfff;
             width: 120px;
             height: 50px;
             line-height: 50px;
             text-align: center;
             transform: skewX(-45deg);
         }
    </style>
</head>
<body>
    <div class="location button">click</div>
</body>
</html>

ログイン後にコピー

CSSの平行四辺形とひし形の変換

しかし、コンテンツのスキューは必要な効果ではない可能性があります。従来の解決策は、内側のレイヤーに div をネストしてから、逆方向のリフティング変換を追加することです。コードに不寛容な人は、コードを受け入れることができないと言います。

もう 1 つのアイデアは、すべてのスタイルを疑似要素に適用することです。次に、擬似要素を変換します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .location{
            position: relative;
            top: 150px;
            left: 150px;
        }
         .button{
             width: 120px;
             height: 50px;
             line-height: 50px;
             text-align: center;
             color: white;
         }
        .button:before{
            content: &#39;&#39;;
            position: absolute;
            top: 0; right: 0; bottom: 0; left: 0;
            background-color: #51bfff;
            transform: skewX(-45deg);
            z-index: -1;
        }
    </style>
</head>
<body>
    <div class="location button">click</div>
</body>
</html>

ログイン後にコピー

CSSの平行四辺形とひし形の変換

これにより、コンテンツの偏りの問題が解決されるだけでなく、HTML 構造も以前と同様にきれいなままです。ただし、擬似要素によって生成されたパターンはコンテンツに重なるため、背景を設定するとコンテンツが覆われてしまうため、z-index: -1 を追加する必要があることに注意してください。

ひし形の絵

正方形をベースにした場合、ひし形は正方形のパターンを45度回転させたものです。外側の div を 45 度回転し、次に内側の img を反対方向に 45 度回転することを考えるのは簡単です。以下のパターンが得られます。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .location{
            position: relative;
            top: 150px;
            left: 150px;
        }
         .picture{
             width: 600px;
             transform: rotate(45deg);
             overflow: hidden;
         }
        .picture>img{
            max-width: 100%;
            transform: rotate(-45deg);
        }
    </style>
</head>
<body>
    <div class="location picture"><img  src="/static/imghw/default1.png"  data-src="1.jpeg"  class="lazy"   alt="CSSの平行四辺形とひし形の変換" ></div>
</body>
</html>

ログイン後にコピー

CSSの平行四辺形とひし形の変換

かなり正八角形です、プロダクトマネージャーを説得できれば作業は完了です。うーん、納得できないかも知れませんね。。。

ここでは回転方向が一貫していないため、外側の div が余分な部分をインターセプトし (オーバーフロー:非表示に注意してください)、その一部は空になります。空白の部分を埋めるとひし形になります。ここでスケッチを描き、ピタゴラスの定理を使用して計算できます。

計算結果は倍率1.42倍で充填完了です。 img のtransform属性をtransform:rotate(45deg)scale(1.42);に変更すると、次の画像が得られます:

CSSの平行四辺形とひし形の変換

このダイヤモンドを構築する方法には欠陥があります。つまり、元の画像が正方形の場合、より大きな倍率が必要になるため、傍受される画像の内容はさらに制限されます。

そして計画自体はシンプルでエレガントなものではありません。ここでは、固定位置の点を渡すことによって画像を任意のポリゴンに切り取ることができるプロパティクリップパス (残念ながら、サポートが良好ではないようです) を紹介します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .location{
            position: relative;
            top: 150px;
            left: 150px;
        }
        .picture{
            -webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
            -moz-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
            clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
            transition: 1s clip-path;
        }

    </style>
</head>
<body>
<img  class="location picture lazy"  src="/static/imghw/default1.png"  data-src="1.jpeg"    alt="CSSの平行四辺形とひし形の変換" >
</body>
</html>

ログイン後にコピー

CSSの平行四辺形とひし形の変換

近い将来、クリップパス属性がさまざまなブラウザでより適切にサポートされることを願っています。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7461

CakePHP チュートリアル

1376

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

ブートストラップボタンの使用方法 Apr 07, 2025 pm 03:09 PM

ブートストラップボタンの使用方法は？ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します

ブートストラップに写真を挿入する方法 Apr 07, 2025 pm 03:30 PM

ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。

ブートストラップのフレームワークをセットアップする方法 Apr 07, 2025 pm 03:27 PM

Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。

ブートストラップのサイズを変更する方法 Apr 07, 2025 pm 03:18 PM

Bootstrapの要素のサイズを調整するには、次のものを含むDimensionクラスを使用できます。

ブートストラップの日付を表示する方法 Apr 07, 2025 pm 03:03 PM

回答：ブートストラップの日付ピッカーコンポーネントを使用して、ページで日付を表示できます。手順：ブートストラップフレームワークを紹介します。 HTMLで日付セレクター入力ボックスを作成します。ブートストラップは、セレクターにスタイルを自動的に追加します。 JavaScriptを使用して、選択した日付を取得します。

ブートストラップの日付を確認する方法 Apr 07, 2025 pm 03:06 PM

ブートストラップの日付を確認するには、次の手順に従ってください。必要なスクリプトとスタイルを紹介します。日付セレクターコンポーネントを初期化します。 Data-BV-Date属性を設定して、検証を有効にします。検証ルール（日付形式、エラーメッセージなどなど）を構成します。ブートストラップ検証フレームワークを統合し、フォームが送信されたときに日付入力を自動的に検証します。

ブートストラップにファイルをアップロードする方法 Apr 07, 2025 pm 01:09 PM

ファイルアップロード機能は、Bootstrapを介して実装できます。手順は次のとおりです。BootstrapCSSおよびJavaScriptファイルを紹介します。ファイル入力フィールドを作成します。ファイルアップロードボタンを作成します。ファイルのアップロードを処理します（FormDataを使用してデータを収集し、サーバーに送信します）。カスタムスタイル（オプション）。