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/imghwm/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/imghwm/default1.png"  data-src="1.jpeg"    alt="CSSの平行四辺形とひし形の変換" >
</body>
</html>

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

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

声明

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

カーソルの次のレベルCSSスタイリングApr 23, 2025 am 11:04 AM

CSSを備えたカスタムカーソルは素晴らしいですが、JavaScriptを使用して次のレベルに物事を引き出すことができます。 JavaScriptを使用して、カーソル状態間で移行し、カーソル内に動的テキストを配置し、複雑なアニメーションを適用し、フィルターを適用できます。

Worlds Collide：スタイルクエリを使用したキーフレーム衝突検出Apr 23, 2025 am 10:42 AM

2025年には、互いに互いに跳ね返る要素を伴うインタラクティブなCSSアニメーションは、CSSにPongを実装する必要はありませんが、CSSの柔軟性とパワーの増加はLee＆＃039;の疑いを補強します。

UI効果にCSSバックドロップフィルターを使用しますApr 23, 2025 am 10:20 AM

CSSバックドロップフィルタープロパティを使用してユーザーインターフェイスをスタイルするためのヒントとコツ。バックドロップフィルターを複数の要素間でレイヤー化する方法を学び、それらを他のCSSグラフィカル効果と統合して、精巧なデザインを作成します。

微笑んでいますか？Apr 23, 2025 am 09:57 AM

まあ、SVG＆＃039;の組み込みのアニメーション機能は、計画どおりに非推奨されることはありませんでした。確かに、CSSとJavaScriptは負荷を運ぶことができる以上のものですが、以前のようにSmilが水中で死んでいないことを知っておくのは良いことです

「かわいい」は見る人の目にありますApr 23, 2025 am 09:40 AM

イェーイ、テキストワラップのジャンプを見てみましょう：サファリテクノロジーのプレビューにかなり着陸してください！しかし、それがChromiumブラウザーでの仕組みとは異なることに注意してください。

CSS-Tricks XLIIIを記録しますApr 23, 2025 am 09:35 AM

このCSS-Tricksアップデートは、アルマナック、最近のポッドキャスト出演、新しいCSSカウンターガイド、および貴重なコンテンツを提供するいくつかの新しい著者の追加の大幅な進歩を強調しています。

Tailwind＆＃039;の@Apply機能は、響きよりも優れていますApr 23, 2025 am 09:23 AM

ほとんどの場合、人々はTailwind＆＃039;の@Apply機能を紹介します。このように展示されたとき、@Applyはまったく有望な音をしません。だからobvio

私はリリースがないように感じます：正気な展開への旅Apr 23, 2025 am 09:19 AM

馬鹿のように展開することは、展開に使用するツールと複雑さの報酬と複雑さの減少との間の不一致になります。

See all articles

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。