创建由对角线边框分隔的4张图片横幅

Question

我必须创建一个包含4张图片的横幅。这些照片必须是独立的，以使它们在平板电脑上分为2列，而在移动设备上则为1列。它应该是这样的：

Example

如果可以的话，如何实现？我已经尝试过歪斜和剪切路径，但是它们不够可靠，至少在我尝试过的方式上。但是，如果有人对使用这些方法或其他任何方法有建议（除了Flash哈哈哈：P），那么如果您可以分享这些建议，我将不胜感激。

谢谢！

这是我能找到的代码。尽管只是现在删除的代码中的残余。

.home-top{
	width: 100%;
	position: relative;
}

.cp{
	width: 25%;
	height: 525px;
	display: inline-block;
	position: absolute;
}

.cp1 {
    -webkit-clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);
}

.cp2 {
    -webkit-clip-path: polygon(20% 0, 100% 0, 80% 100%, 0% 100%);
    clip-path: polygon(20% 0, 100% 0, 80% 100%, 0% 100%);
	left: -20%;
}

.cp3 {
    -webkit-clip-path: polygon(20% 0, 100% 0, 80% 100%, 0% 100%);
    clip-path: polygon(20% 0, 100% 0, 80% 100%, 0% 100%);
}

.cp4 {
    -webkit-clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
}

.home-top-section{
	width: 100%;
	height: 100%;
}

.home-top-section-1 {
	background: url('images/carre1.jpg') no-repeat;
}

.home-top-section-2 {
	background: url('images/carre2.jpg') no-repeat right top;
}

.home-top-section-3 {
	background: url('images/carre3.jpg') no-repeat;
}

.home-top-section-4 {
	background: url('images/carre4.jpg') no-repeat right top;
}

.home-top-section-content{
	position: absolute; 
	left: 0; 
	right: 0; 
	margin-left: auto; 
	margin-right: auto; 
	width: 100%;
	bottom: 25px;
}

.home-top-section p{
	color: #ffffff;
	padding: 25px 0 25px 60px;
	font-size: 24px;
	font-weight: 500;
	background: -moz-linear-gradient(left, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
	background: -webkit-linear-gradient(left, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
	background: linear-gradient(to right, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 );
}

.home-top-section .btn{
	max-width: 104px;
	margin-left: 60px;
}

<section class="home-top clearfix">
		<div class="cp cp1">
			<div class="home-top-section-1 home-top-section">
				<div class="overlay"></div>
				<div class="home-top-section-content">
					<p>Section One</p>
					<a href="#" class="btn">Enter</a>
				</div>
			</div>
		</div>
		
		<div class="cp cp2">
			<div class="home-top-section-2 home-top-section">
				<div class="home-top-section-content">
					<p>Section Two</p>
					<a href="#" class="btn">Enter</a>
				</div>
			</div>
		</div>
		
		<div class="cp cp3">
			<div class="home-top-section-3 home-top-section">
				<div class="home-top-section-content">
					<p>Section Three</p>
					<a href="#" class="btn">Enter</a>
				</div>
			</div>
		</div>
		
		<div class="cp cp1">
			<div class="home-top-section-4 home-top-section">
				<p>Section Four</p>
					<a href="#" class="btn">Enter</a>
				</div>
			</div>
		</div>
	</section>

Answer 1

您是否尝试过转换偏斜？

我创建了一个非常简单的示例，该示例类似于您共享的代码，并使用了两种可能有用的不同技术。每个代码段中的注释都指出了每一行的作用。

使用flexbox对齐框：

* { box-sizing: border-box; }
body { margin: 0; }

.home-top {
  width: 100%;
  height: 250px; /* height of the whole section set on the parent container only thanks to flexbox */
  display: flex;
  overflow: hidden; /* need this to hide the overlapping that skew will create */
}
.skew-outer {
  border: 1px solid red; /* for visibility */
  flex: 1 0 25%; /* the third value is the flex-basis and represents the starting width of items */
  display: flex; /* inner layout */
  flex-direction: column;
}
.skew-inner {
  border: 1px solid blue; /* for visibility */
  flex: 1 0 auto; /* occupy the whole height (the parent div is column flexbox) */
  display: flex; /* inner layout for the content inside */
  flex-direction: column;
  align-items: center; /* totally... */
  justify-content: center; /* ...centered */
}

<section class="home-top">

  <div class="skew-outer skew1">
    <div class="skew-inner">
      <p>Section One</p>
      <a href="#" class="btn">Enter</a>
    </div>
  </div>
  
  <div class="skew-outer skew2">
    <div class="skew-inner">
      <p>Section Two</p>
      <a href="#" class="btn">Enter</a>
    </div>
  </div>
  
  <div class="skew-outer skew3">
    <div class="skew-inner">
      <p>Section Three</p>
      <a href="#" class="btn">Enter</a>
    </div>
  </div>
  
  <div class="skew-outer skew4">
    <div class="skew-inner">
      <p>Section Four</p>
      <a href="#" class="btn">Enter</a>
    </div>
  </div>
  
</section>

倾斜外部框以创建对角线布局效果，请注意这也使所有子元素倾斜：

* { box-sizing: border-box; }
body { margin: 0; }

.home-top {
  width: 100%;
  height: 250px;
  display: flex;
  overflow: hidden;
}
.skew-outer {
  border: 1px solid red;
  flex: 1 0 25%;
  display: flex;
  flex-direction: column;
  transform: skewX(-15deg); /* here is the skew */
  overflow: hidden; /* to prevent overflowing this box now, will be important going on */
}
.skew-inner {
  border: 1px solid blue;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

<section class="home-top">

  <div class="skew-outer skew1">
    <div class="skew-inner">
      <p>Section One</p>
      <a href="#" class="btn">Enter</a>
    </div>
  </div>
  
  <div class="skew-outer skew2">
    <div class="skew-inner">
      <p>Section Two</p>
      <a href="#" class="btn">Enter</a>
    </div>
  </div>
  
  <div class="skew-outer skew3">
    <div class="skew-inner">
      <p>Section Three</p>
      <a href="#" class="btn">Enter</a>
    </div>
  </div>
  
  <div class="skew-outer skew4">
    <div class="skew-inner">
      <p>Section Four</p>
      <a href="#" class="btn">Enter</a>
    </div>
  </div>
  
</section>

然后将内盒倾斜到另一个方向以使内容变直：

* { box-sizing: border-box; }
body { margin: 0; }

.home-top {
  width: 100%;
  height: 250px;
  display: flex;
  overflow: hidden;
}
.skew-outer {
  border: 1px solid red;
  flex: 1 0 25%;
  margin: 0 -1px;
  display: flex;
  flex-direction: column;
  transform: skewX(-15deg);
  overflow: hidden;
}
.skew-inner {
  border: 1px solid blue;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: skewX(15deg); /* here is the counter skewing that sets the inner div back straight */
}

<section class="home-top">

  <div class="skew-outer skew1">
    <div class="skew-inner">
      <p>Section One</p>
      <a href="#" class="btn">Enter</a>
    </div>
  </div>
  
  <div class="skew-outer skew2">
    <div class="skew-inner">
      <p>Section Two</p>
      <a href="#" class="btn">Enter</a>
    </div>
  </div>
  
  <div class="skew-outer skew3">
    <div class="skew-inner">
      <p>Section Three</p>
      <a href="#" class="btn">Enter</a>
    </div>
  </div>
  
  <div class="skew-outer skew4">
    <div class="skew-inner">
      <p>Section Four</p>
      <a href="#" class="btn">Enter</a>
    </div>
  </div>
  
</section>

使用伪元素应用背景图像和覆盖层

到这一点，您将需要z-index才能使图层保持正确的顺序。

最终的工作示例：

* { box-sizing: border-box; }
body { margin: 0; }

.home-top {
  width: 100%;
  height: 250px;
  display: flex;
  overflow: hidden;
}
.skew-outer {
  position: relative;
  flex: 1 0 25%;
  margin: 0 -1px; /* I saw a little gap between the skewed boxes, this was a quick fix */
  display: flex;
  flex-direction: column;
  transform: skewX(-15deg);
  overflow: hidden;
}
.skew-inner {
  color: white;
  position: relative; /* position relative needed for z-index to work */
  z-index: 3; /* layer 3, on top */
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: skewX(15deg);
}
.skew-outer:before {
  content: ''; /* pseudo element for the background images */
  position: absolute;
  top: 0; /* all directions 0 = cover the whole element */
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1; /* layer 1 */
  transform: skewX(15deg) scale(1.5); /* the background image needs be skewed (skewX) like the content as it is relative to the parent container, and it needs to be larger (scale) to cover the whole outer div because of the skewing the corners are uncovered with this */
  background-size: cover; /* background images will cover the whole pseudo element */
}
.skew1:before {
  background-image: url('https://picsum.photos/200/300'); /* each div's pseudo elemnt gets a different image background */
}
.skew2:before {
  background-image: url('https://picsum.photos/180/320');
}
.skew3:before {
  background-image: url('https://picsum.photos/100/150');
}
.skew4:before {
  background-image: url('https://picsum.photos/120/180');
}
.skew-outer:after {
  content: ''; /* here is the overlay that darkens the background */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2; /* layer 2 */
  background: rgba(0,0,0,0.4); /* rgba this means 40% opacity black */
}

<section class="home-top">

  <div class="skew-outer skew1">
    <div class="skew-inner">
      <p>Section One</p>
      <a href="#" class="btn">Enter</a>
    </div>
  </div>
  
  <div class="skew-outer skew2">
    <div class="skew-inner">
      <p>Section Two</p>
      <a href="#" class="btn">Enter</a>
    </div>
  </div>
  
  <div class="skew-outer skew3">
    <div class="skew-inner">
      <p>Section Three</p>
      <a href="#" class="btn">Enter</a>
    </div>
  </div>
  
  <div class="skew-outer skew4">
    <div class="skew-inner">
      <p>Section Four</p>
      <a href="#" class="btn">Enter</a>
    </div>
  </div>
  
</section>