css实现倾斜网格图文效果代码-html代码-BFW代码库

css实现倾斜网格图文效果代码

代码语言：html

代码描述：css实现倾斜网格图文效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  <meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
  
<style>
body {
  font-family: "Montserrat", sans-serif;
}

.container {
  max-width: 1000px;
  margin: 150px auto;
  padding-right: 20px;
  padding-left: 20px;
}

.skewGrid {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  -moz-column-gap: 24px;
       column-gap: 24px;
  row-gap: 24px;
  transform: skewY(-10deg);
}

.skewGridItem {
  position: relative;
  padding: 32px;
}
.skewGridItem:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 107px;
  background-color: #cccccc;
  z-index: -1;
}

.media {
  display: flex;
  align-items: center;
  transform: skewY(10deg);
}

.mediaImg {
  position: relative;
  top: 20px;
  margin-right: 24px;
}

h2 {
  font-size: 24px;
  margin-bottom: 10px;
  font-weight: 600;
}

p {
  line-height: 1.54;
}

@media (min-width: 800px) {
  .skewGrid {
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
  }
}
</style>


</head>

<body>
  <div class="container">

    <div class="skewGrid">
        <div class="skewGridItem">
            <div class="media">
                <img src="//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_190,h_190,/quality,q_90" alt="" class="mediaImg">
                <div class="mediaContent">
                    <h2 class="heading">Header</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

                </div>
     .........完整代码请登录后点击上方下载按钮下载查看