台形の作り方【css】

画像をはるのではなく、台形をcssで作成します。

○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="centerBox">
          <div class="shapContainer01"></div>
          <div class="shapContainer02"></div>
          <div class="shapContainer03"></div>
          <div class="shapContainer04"></div>
        </div>
      </div>
    </main>
    <!--footer-->
    <footer></footer>
  </body>
</html>

・div class=”shapeContainer”に台形のスタイルをそれぞれ当てます。

○index.css

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

.shapContainer01 {
  width: 300px;
  height: 300px;
  margin: 0 auto 100px;
  background-color: blue;
  position: relative; }
  .shapContainer01::before {
    content: '';
    border-top: solid 300px blue;
    border-right: solid 150px transparent;
    border-bottom: solid 0px transparent;
    border-left: solid 300px blue;
    position: absolute;
    left: 0;
    top: 0; }

.shapContainer02 {
  width: 300px;
  height: 300px;
  margin: 0 auto 100px;
  background-color: blue;
  position: relative; }
  .shapContainer02::before {
    content: '';
    border-top: solid 0px transparent;
    border-right: solid 150px transparent;
    border-bottom: solid 300px blue;
    border-left: solid 300px blue;
    position: absolute;
    left: 0;
    top: 0; }

.shapContainer03 {
  width: 300px;
  height: 300px;
  margin: 0 auto 100px;
  background-color: blue;
  position: relative; }
  .shapContainer03::before {
    content: '';
    border-top: solid 0px transparent;
    border-right: solid 300px blue;
    border-bottom: solid 300px blue;
    border-left: solid 150px transparent;
    position: absolute;
    right: 0;
    top: 0; }

.shapContainer04 {
  width: 300px;
  height: 300px;
  margin: 0 auto 100px;
  background-color: blue;
  position: relative; }
  .shapContainer04::before {
    content: '';
    border-top: solid 300px blue;
    border-right: solid 300px blue;
    border-bottom: solid 0px transparent;
    border-left: solid 150px transparent;
    position: absolute;
    right: 0;
    top: 0; }

台形は四角形と三角形の組合せでつくることができます。

①　四角形は高さ300px、幅300pxとします。(shapContainer01.02.03.04)

②　shapContainerそれぞれに疑似要素で三角形を追加します。

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

今回は以上です。