画像を台形で表示【css】

Pocket

前回はcssで台形を作成しました。⇒https://webya.site/trapezoid/

今回は前回の内容をふまえて画像をレスポンシブ対応した台形で表示します。

画像のトリミングにはclip-pathプロパティがありますが、

ie未対応なのでブラウザを考えると使えないんですよね。

今回作成するデモは、clip-pathは使用しないのでブラウザ問題は気にしなく良いはずです。

今回作成するデモはこちら

前半4枚が、台形のパターン。後半4枚は理解の補助に使ってください。

○index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
    <title>タイトルだよ</title>
    <meta name="description" content="ディスクリプションだよ">
    <meta name="keywords" content="キーワード1, キーワード2">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="css/index.css">
  </head>
  <body>
    <!--header-->
    <header></header>
    <main ontouchstart="">
      <div class="container">
        <div class="imgContainer">
          <div class="itemImg01"><img src="images/test.jpg"></div>
        </div>
        <div class="imgContainer">
          <div class="itemImg02"><img src="images/test.jpg"></div>
        </div>
        <div class="imgContainer">
          <div class="itemImg03"><img src="images/test.jpg"></div>
        </div>
        <div class="imgContainer">
          <div class="itemImg04"><img src="images/test.jpg"></div>
        </div>
      </div>
    </main>
    <!--footer-->
    <footer></footer>
  </body>
</html>

・div class=”itemImg01,02,03,04″に台形のスタイルをそれぞれ当てます。

○index.css

.container {
  background-color: #e6e6e6;
  padding: 100px 0; }

.itemImg01 {
  overflow: hidden;
  max-width: 800px;
  margin: 0 auto 100px;
  position: relative; }
  .itemImg01::before {
    content: '';
    border-top: solid 550px transparent;
    border-right: solid 275px #e6e6e6;
    position: absolute;
    right: 0;
    top: 0; }
  .itemImg01 img {
    max-width: 100%;
    width: 100%; }

.itemImg02 {
  overflow: hidden;
  max-width: 800px;
  margin: 0 auto 100px;
  position: relative; }
  .itemImg02::before {
    content: '';
    border-right: solid 275px #e6e6e6;
    border-bottom: solid 550px transparent;
    position: absolute;
    right: 0;
    bottom: 0; }
  .itemImg02 img {
    max-width: 100%;
    width: 100%; }

.itemImg03 {
  overflow: hidden;
  max-width: 800px;
  margin: 0 auto 100px;
  position: relative; }
  .itemImg03::before {
    content: '';
    border-bottom: solid 550px transparent;
    border-left: solid 275px #e6e6e6;
    position: absolute;
    left: 0;
    bottom: 0; }
  .itemImg03 img {
    max-width: 100%;
    width: 100%; }

.itemImg04 {
  overflow: hidden;
  max-width: 800px;
  margin: 0 auto 100px;
  position: relative; }
  .itemImg04::before {
    content: '';
    border-top: solid 550px transparent;
    border-left: solid 275px #e6e6e6;
    position: absolute;
    left: 0;
    top: 0; }
  .itemImg04 img {
    max-width: 100%;
    width: 100%; }

・<img>の親要素である<div>に対して、疑似要素を追加します。

・疑似要素で三角形を作成し、写真の上に配置します。このとき三角形の色を背景と同一のものにすれば、写真が台形に切り取られているように見えます。

・さらに、疑似要素の配置によっては写真がレスポンシブに対応しないように変化するので注意してください。

※borderの組合せで三角形の形を変えることができるので、てきとうに数字をいじってください。

今回は以上です。