• HOME > 
  • CSS > 
  • CSSでひし形を作る方法【画像をトリミングするテクニックも紹...

CSSでひし形を作る方法【画像をトリミングするテクニックも紹介!】

投稿日:

広告

CSSだけでひし形は作り出せる?

Webサイトの制作をしている中で、ひし形を取り入れたデザインを作りたい時あなたならどうしますか?

画像編集ソフトなどの図形ツールで用意して…、サーバーにアップして…。

ひし形の例

実はCSSだけでひし形を作り出すことができるんです。

ひし形を作るための専用のプロパティは存在しませんが、要素を変型や回転させることができるtransformプロパティを活用することでひし形を作ることができます。

CSSでひし形を作るメリット

CSSで作った「ひし形」は編集がとても簡単です。

画像編集ソフトなどで作った場合、色を変更するだけでも、わざわざソフトを開いて編集してアップロードし直すという手間の掛かる作業になります。

一方でCSSであればスタイルシート上でプロパティの値を書き換えるだけで簡単に変更できます。

transformプロパティでひし形を作る方法

transformプロパティは、要素の移動や変型・回転を行うプロパティです。

このプロパティを利用して要素を回転させてひし形を作り出します。

rotateを使って正方形のひし形を作る

transformプロパティの値の一つである「rotate」は要素を任意の角度に回転させることができます。

rotateの書き方

単位deg(度:degreeの略)を付けて任意の角度を指定します。

これを利用して正方形の要素を45度回転させれば、簡単にひし形が出来上がります。

HTML

<div class="sample sample1"></div>

CSS

.sample{/*元の正方形*/
    background:#541231;
    margin:50px;
    padding:10px;
    width:150px;
    height:150px;
}
.sample1{
    transform:rotate(45deg);/*回転*/
}

プレビュー

skewを使ってひし形を作る

続いては辺の長さが異なるひし形の作り方です。

前述のrotateに加え、同じくtransformの値である「skew」を利用します。skewは要素の縦方向と横方向に傾斜をつけることができます。

skewの書き方

下の例は元は正方形ですが、左から順に「縦方向のみ」「横方向のみ」「縦横それぞれ」にskewを使って傾斜を付けています。

skewの例

skewを使って変型させた要素をrortateで回転させれば、辺の長さが異なるひし形の出来上がりです。

transformで変型と傾斜を同時に指定する時は、半角スペースを空けて記述します。(※rotateを先に記述しないとひし形にならないので注意してください)

HTML

<div class="sample sample2"></div>

CSS

.sample{/*元の正方形*/
    background:#541231;
    margin:50px;
    padding:10px;
    width:150px;
    height:150px;
}
.sample2{
    transform:rotate(45deg) skew(10deg,15deg);/*回転と傾斜*/
}

プレビュー

画像をひし形にトリミングする

transformで作成したひし形を用いれば、次のような画像のトリミングもCSSだけで行うことができます。

トリミングの例

方法はとてもシンプルで、ひし形に変型させた要素の子要素に画像を設置するだけです。

HTML

<div class="sample sample3"><img src="sample1.jpg" alt="トリミングしたい画像"></div>

CSS

.sample{/*元の正方形*/
    background:#541231;
    margin:50px;
    padding:10px;
    width:150px;
    height:150px;
}
.sample3{/*ひし形にする*/
    width:200px;
    height:200px;
    transform:rotate(45deg);/*回転*/
    overflow: hidden;
}
.sample3 img{/*画像*/
    width:400px;
    height: auto;
    transform: rotate(-45deg) translate(0px,-70px);
}

コードの解説

正方形を回転させてひし形にするまでは、先程と同様です。

12行目overflow:hiddenでひし形からはみ出した部分を隠します。

17行目ここが今回のポイントです。親要素をひし形にするために回転させると子要素も一緒に回転してしまいます。

そこで画像(子要素)に対して、逆方向の回転を指定することで正しい向きに戻しています。

逆方向の回転で戻す

まとめ

以上がCSSでひし形を作る方法です。

transformプロパティだけで簡単に作れますので是非活用してサイトのデザインに取り入れてみて下さい。

広告

関連する記事

サムネイル

CSSの疑似クラス「:focus」の使い方【focus-wi……

2023年05月01日
最終更新日:2023年05月31日
CSSでは疑似クラスである「:focus」を用いることで、フォーカス時のスタイルを設定することが可能です。一方「:focus-within」は、その要素自体もしくは子要素にフォーカスがある状態で有効になります。
サムネイル

CSSのclamp()・max()・min()の使い方【プロ……

2023年01月16日
最終更新日:2023年03月10日
clamp()・max()・min()はCSSのプロパティの値の指定に利用できる比較関数です。複数の値を比較し1つの値を導きだし上限や下限を設定できます。
サムネイル

CSSのfont-feature-settingsの使い方【……

2023年01月16日
最終更新日:2023年03月10日
font-feature-settingsは、文字本来のサイズに応じてフォントの文字詰め(カーニング)を設定するためのプロパティです。
サムネイル

CSSのletter-spacingで文字間隔を設定【中央寄……

2023年01月16日
最終更新日:2023年03月10日
letter-spacingは、テキストの文字と文字との間隔を設定するためのプロパティです。文字と文字の間を狭めたり、広げたりしてバランスを整えることができます。
サムネイル

CSSのtext-emphasisの使い方【圏点(けんてん)……

2023年01月16日
最終更新日:2023年03月10日
text-emphasisは、文字を強調したいときに付け加える圏点(けんてん)を表示するプロパティです。圏点のスタイル(形状)と色を自由に設定することが可能です。
サムネイル

CSSで中国語フォントを表示させる方法【font-famil……

2022年10月28日
最終更新日:2023年03月10日
簡体字を使用するにはサイトにGoogle FontsなどのWebフォントを導入して、CSSのfont-familyプロパティでそのフォントを指定します。
サムネイル

CSSだけで斜線を引く方法【transformとlinear……

2022年08月09日
最終更新日:2023年03月10日
CSSだけで斜線を引くには、「transformプロパティのrotateを使う」と「backgroundプロパティのlinear-gradient」という2通りの方法があります。