css实现阶梯式文字句子图文排列布局效果代码-html代码-BFW代码库

css实现阶梯式文字句子图文排列布局效果代码

代码语言：html

代码描述：css实现阶梯式文字句子图文排列布局效果代码

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

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

<head>
  <meta charset="UTF-8">
  

    <link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" />

    <meta name="apple-mobile-web-app-title" content="CodePen">

    <link rel="icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />

    <link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg" color="#111" />



  
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script>


  <title>Trendy UI with Clip-Path and Grid</title>

    <link rel="canonical" href="https://codepen.io/dandenney/pen/vEEbLJe">
  
  
  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

main {
  background-color: #15272a;
  padding: 1rem;
}

.media-primary,
.media-secondary {
  grid-area: 1 / 1 / 2 / 2;
}

.media-primary {
  aspect-ratio: 346 / 300;
  clip-path: url(#media-clip-path-default);
  position: relative;
}

.media-primary img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.media-secondary {
  aspect-ratio: 122 / 119;
  background-color: #465e5f;
  border-radius: 12px;
  justify-self: end;
  width: 35%;
}

.media-secondary svg {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.text-heading {
  background-color: #b6d2d3;
  border-radius: 0.75rem;
  clip-path: url(#clip-heading);
  font-size: 2.5rem;
  font-weight: bold;
  line-height: 1.15;
  margin-block-sta.........完整代码请登录后点击上方下载按钮下载查看