将 4 个背景图像定位在顶部、左侧、右侧和底部

Question

我正在尝试设计以下 UI。

为此，我创建了两个将用作背景的图像。 注意：总共需要四张图片，但底部图片可以用作顶部的转置，同样的右侧可以用作左侧的转置。

我可以放置顶部和左侧，但无法放置底部和右侧图像。

  <div class="layout-shape-container">
    <div class="top-shape" style="text-align: center;">
      dfdffddfdffd
      dfdffddfdffd
      dfdffddfdffd
      dfdffddfdffd
      dfdffddfdffd
      dfdffddfdffd
      dfdffddfdffd
      dfdffddfdffd
    </div>

    <div class="left-shape" style="">
      <p>dsds</p>
      <p>sdsdsdds</p>
      <p>dsds</p>
      <p>sdsdsdds</p>
      <p>dsds</p>
      <p>sdsdsdds</p>
      <p>dsds</p>
      <p>sdsdsdds</p>
      <p>dsds</p>
      <p>sdsdsdds</p>
      <p>dsds</p>
      <p>sdsdsdds</p>
      <p>dsds</p>
      <p>sdsdsdds</p>
    </div>
  </div>

CSS：

.layout-shape-container{
    margin-bottom: 172px;
    position: relative;
    width: 900px;
    height: 900px;
}
.top-shape{
    background-image: url("https://i.ibb.co/QPZTzSJ/top-triangle-shape.png");
    height: 50%;
    width: 100%;
    background-repeat: no-repeat;
    z-index: 9;
}
.left-shape{
    background-image: url("https://i.ibb.co/TchQ4rp/left-triangle-shape.png");
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    top: 172px;
    left: 0;
    position: absolute;

}

这里是fiddle。

谁能帮我理解，我将如何放置右侧和底部形状的图像？

另外，是否可以不使用这些形状图像来实现布局？

Answer 1

您可以将clip-path 用于形状，以及一些绝对 定位和flex显示。

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-size: .9rem;
}

#main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: white;
  height: 100vh;
  position: relative;
}

#left {
  flex: 1;
  height: 80%;
  background: blue;
  clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%); 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

ul li {
  list-style: none;
}

#sect {
  flex: 2;
  display: flex;
  justify-content: center;
  padding: .5rem;
}

#right {
  flex: 1;
  height: 80%;
  background: blue;
  clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 0% 50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#top {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: #ddd;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 20vh;
  clip-path: polygon(100% 0, 100% 77%, 50% 100%, 0 77%, 0 0);
}

#bottom { 
  display: flex;
  align-items: flex-end;
  justify-content: center; 
  background: #ddd;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 20vh;
  clip-path: polygon(50% 1%, 100% 23%, 100% 100%, 0 100%, 0 23%);
}

<div id="main">
  <!-- absolutely positioned elements for top and bottom
      placed on top so z-index is behind following content-->
  <div id="top">This is the top section</div>
  <div id="bottom">This is the bottom section</div>
  <!-- main flex container starts here  
       Place a justify-content: space-between to space 
       left and right elements to far edges -->
  <div id="left">
    <ul>
      <li>List Item 1</li>
      <li>List Item 2</li>
      <li>List Item 3</li>
      <li>List Item 4</li>
    </ul>
  </div>
  <div id="sect">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  <div id="right">
    <ul>
      <li>List Item 1</li>
      <li>List Item 2</li>
      <li>List Item 3</li>
      <li>List Item 4</li>
    </ul>
  </div>  
</div>

Answer 2

您将在下面找到一个开始示例。

我使用了这个 codepen：https://codepen.io/stoumann/pen/abZxoOM

还有一些使用边框的方法

body{
  margin: 0;
}
.container{
  position:relative;
  height:100vh;
}
.top{
  width:100%;
  height:100px;
  background: grey;
}
.top-2{
  position:absolute;
  top: 100px; /* Should be equal to .top height */
  height:20px;
  width: 100%;
  background: grey;
  clip-path: polygon(100% 0%,0% 0%,50% 100%);
}
.left{
  width:20%;
  height:80%;
  position:absolute;
  top:10%;
  left:0;
  background: blue;
}
.left-2{
  width: 20px;
  height: 80%; /* Should be equal to .left height */
  position:absolute;
  top:10%;
  left:20%;  /* Should be equal to .left width */
  background: blue;
  clip-path: polygon(0% 0%,0% 100%,100% 50%);
}

<div class="container">
  <div class="top"></div>
  <div class="top-2"></div>
  <div class="left">
      dfdffddfdffd
      dfdffddfdffd
      dfdffddfdffd
      dfdffddfdffd
      dfdffddfdffd
      dfdffddfdffd
      dfdffddfdffd
      dfdffddfdffd
  </div>
  <div class="left-2"></div>
</div>

Answer 3

由于蓝/白形状只是为了装饰而不是具有任何重要的语义价值，您可能希望将其放入伪元素中，而不是在主 HTML 中，额外的 div(s) 除了给一点背景色。

这是一个粗略的示例，显然您需要更改 % 值以适合您的实际情况。它在后伪元素上放置一个线性渐变背景，然后将其裁剪为多边形形状。 before 伪元素提供了底层的灰色背景。如果您以 % 的形式定义 div 的尺寸，那么整个事情就会变得响应。

.layout-shape-container {
  margin-bottom: 172px;
  position: relative;
  width: 900px;
  height: 900px;
}

.layout-shape-container::before,
.layout-shape-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.layout-shape-container::before {
  background: gray;
  z-index: -2;
}

.layout-shape-container::after {
  background-image: linear-gradient(to right, blue 0, blue 30%, white 30%, white 70%, blue 70%, blue 100%);
  z-index: -1;
  clip-path: polygon(0 20%, 30% 20%, 50% 50%, 70% 20%, 100% 20%, 100% 80%, 70% 80%, 50% 50%, 30% 80%, 0% 80%);
}

<div class="layout-shape-container"></div>