css

cssで平行四辺形を作る方法「1行足せばできますよ」

投稿日:

Pocket

うも、チャーさんです。

 

あなたは、cssで平行四辺形に

できないものかと思っていませんか?

 

この記事では、要素をcssで平行四辺形に

する方法を書いています。

 

 

なのであなたがこの記事を読めば、

cssで平行四辺形を作ることが可能です。

 

ということで、cssで要素を平行四辺形に

したいと思っていたら、このまま下にスクロールし

読んでみてください。

 

スポンサードサーチ

cssで平行四辺形にするには

 

ということでまず結論からです。

cssで平行四辺形を作りたい場合、

transform:skewX(数字deg);を使いましょう。

 

transform:というのは、

要素を回転させたり、歪めたり、

軸を元に色々と見せ方を変えることができます。

 

 

そして、skewというのは、

transform:で使える値の1つでして、

これを使うと以下の画像のように、

 

平行四辺形に見せることが可能です。

 

css 平行四辺形

 

で、やり方ですが、

画像をみていただいた通りで、

平行四辺形にしたい要素に対して、

 

transform:skewX(deg)とかき、

degの前に数値を入れましょう。

 

ちなみにこの数値次第で、

平行四辺形の傾き具合が変わります。

 

 

スポンサードサーチ

cssで縦の平行四辺形にしたい場合

 

またこのskewの後のXですが、

これは軸のことでして、二次関数の表

を思い出してもらったらわかると思いますが、

 

Xだと横に、Yだと縦に対して、

傾きが変わっていきます。

 

 

なので、縦がたの平行四辺形を

作りたい場合は、skewYでcss書いてやると良いです。

 

デザインの都合上、divのボックスを、

平行四辺形にしたいこともあるでしょう。

 

そんな時に使ってみてください。

 

スポンサードサーチ

まとめ

 

ということでまとめに入ります。

 

cssで平行四辺形を作りたい場合は、

transform:skewX(数字deg);を使いましょう。

 

これをcssで書いてやれば、

平行四辺形に見せることが可能です。

 

 

ということで、cssでの平行四辺形のやり方は、

わかったと思いますので、あなたの方でも

実践してみましょう。

 

するとスキルアップしますよ。

 

 

ということで、手順ですが、

まずは平行四辺形にしたい要素を用意しましょう。

 

わかりやすいのはdivです。

 

css

div {
height:100px;
width:100px;
border:1px solid black;
}

html

<div>
</div>

 

コピペで楽できるように

上にコードのせときます。

 

 

で、あとは、cssでtransform:skewX()を

書きましょう。

 

コード例としては以下です。

div {
height:100px;
width:100px;
transform:skewX(20deg);
border:1px solid black;
margin-left:50px;(平行四辺形にすると横に伸びるのでお好みで)
}

 

でブラウザを再読み込みして、

ちゃんと平行四辺形になってればokです。

 

 

ということで、cssで平行四辺形を作る方法に

ついての記事でした。

 

それでは、読んでもらってありがとうございました。

 

チャーさん

-css


スポンサードサーチ

関連記事

no image

cssの読み込み方法を3つ紹介「どれも簡単です」

どうも、チャーさん(@chaa___san)です。   あなたはcssの読み込み方法がわからず、 困っていますか?   この記事ではcssの読み込み方法を3つ紹介してます。 なので …

no image

cssの書き方これらのセレクタを知ってればほぼ困りません

どうも、チャーさんです。   あなたはcssの書き方でセレクタに ついて色々な書きかたがあってよくわかってない、 と感じていませんか?   この記事では様々なセレクタの指定方法を …

no image

flexcssを使って横並びにする方法(ページ制作に超便利です)

どうも、チャーさんです。   あなたはflexというcssのプロパティを使い、 要素を横並びにする方法を知りたい。 そう思っていませんか?   この記事ではcssのflexを使い、 …

no image

cssで見出しに画像を表示させる方法「簡単にできる」

どうも、チャーさんです。 あなたはcssで見出しに画像を表示させたい。 そう思っていませんか?   この記事では、cssで見出しに画像を 表示させる方法を書いてます。   なのであ …

no image

positionで縦に中央寄せする方法はこちらです。

どうも、チャーさんです。   あなたはpositionで縦に中央寄せをしたいのに、 できずに困っていませんか?     この記事ではpositionで要素を縦に、 中央寄 …

no image

z-indexが効かない場合の解決法(relativeつけたのに効かない場合)

   どうもチャーさんです。   あなたはz-indexが効かないと困っていませんか? ちゃんとrelativeもつけてるのに、 なぜ効かないんだと悩んでいませんか?   この記事 …

no image

cssでボタンにhoverした時に色を変える方法

どうもチャーさんです。   あなたは、cssでボタンにhoverして、 色を変える方法を探していますか?   この記事では、ボタンホバーで、 ボタンの色を変える方法について、 お話 …

no image

cssで画像を中央寄せできないを一瞬で解決する方法「コピペOK」

どうもチャーさん(@chaa___san)です。   あなたはcssで画像の中央寄せができないと、 悩んでいませんか?   この記事ではそんな悩みを解決し、 一発で画像を中央寄せで …

no image

position:absoluteがレスポンシブでずれるのを解決する簡単な方法

どうも、チャーさんです。   あなたはposition:absoluteが、 レスポンシブにすると、ずれるということで、 困っていませんか?   画面サイズを変えるだけで、 位置が …

no image

レスポンシブ対応の画像にする方法。1行コードを書くだけでOK

  どうも、チャーさんです。   あなたは画像をレスポンシブ対応にしたい、 そう思っていませんか?   ブレイクポイント毎に、画像の幅を指定するのは、 もう疲れた、何か一 …

no image

レスポンシブデザインを3秒で確認できる方法「各サイズ」

どうも、チャーさんです。   あなたは、レスポンシブデザインの確認方法を、 探していませんか?   この記事では、レスポンシブデザインを、 スマホサイズ、タブレットサイズ、pcサイ …

max-widthとmin-widthの違いについてわかりやすく説明します

  あなたはmax-widthとmin-widthの 違いについて疑問を持ってますか?   この記事では、max-widthとmin-width の違いを説明してるので、これを読め …

no image

cssでドロップダウンメニューを作る方法

どうも、チャーさんです。   あなたはcssでドロップダウンメニューを 作りたいと思っていませんか?   この記事ではjavascriptなどを使わずに htmlとcssのみでドロ …

no image

ブートストラップの使い方を初心者向けに紹介

どうも、チャーさんです。   あなたはブートストラップを使ってみたい、 または使わないといけないけど、 使い方がわからない。   導入の仕方も、何したらいいかもわからない。 そんな …

no image

cssで背景画像をレスポンシブ対応させる方法「1行記述すればok」

どうも、チャーさんです。   あなたはcssで背景画像をレスポンシブ対応させたい、 そう思っていませんか?   この記事では、cssで背景画像を、 レスポンシブ対応させる方法を書い …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。