ホームページ > 記事 > ウェブフロントエンド > CSSの平行四辺形とひし形の変換
CSSの平行四辺形とひし形の変換
- 高洛峰オリジナル
- 2016-11-30 16:01:242143ブラウズ
*以下のテクニックはすべて、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>
しかし、コンテンツのスキューは必要な効果ではない可能性があります。従来の解決策は、内側のレイヤーに 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: '';
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>
これにより、コンテンツの偏りの問題が解決されるだけでなく、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="1.jpeg" alt="CSSの平行四辺形とひし形の変換" ></div>
</body>
</html>
かなり正八角形です、プロダクトマネージャーを説得できれば作業は完了です。うーん、納得できないかも知れませんね。 。 。
ここでは回転方向が一貫していないため、外側の div が余分な部分をインターセプトし (オーバーフロー:非表示に注意してください)、その一部は空になります。空白の部分を埋めるとひし形になります。ここでスケッチを描き、ピタゴラスの定理を使用して計算できます。
計算結果は倍率1.42倍で充填完了です。 img のtransform属性をtransform:rotate(45deg)scale(1.42);に変更すると、次の画像が得られます:
このダイヤモンドを構築する方法には欠陥があります。つまり、元の画像が正方形の場合、より大きな倍率が必要になるため、傍受される画像の内容はさらに制限されます。
そして計画自体はシンプルでエレガントなものではありません。ここでは、固定位置の点を渡すことによって画像を任意のポリゴンに切り取ることができるプロパティ クリップパス (残念ながら、サポートが良好ではないようです) を紹介します。
<!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" src="1.jpeg" alt="CSSの平行四辺形とひし形の変換" >
</body>
</html>
近い将来、クリップパス属性がさまざまなブラウザでより適切にサポートされることを願っています。