Question

我需要在图像上创建以下形状。照片在哪里会有可变内容作为滑块。我到目前为止尝试的是用边框宽度创建它，但问题是由于更大的三角形，我无法将小三角形放在照片下面。

我所做的你可以找到here on live demo。也许我必须使用其他方法？有人如何解决它？

    .header {
  float: left;
  width: 100%;
  background: red;
  padding-top: 50px;
  padding-bottom: 200px; }

  .content {
    float: left;
    width: 100%;
    background: blue;
    padding: 50px 0; }

    .shape {
      position: relative;
      float: left;
      width: 100%; }
      .shape--1:before {
        border-top-color: yellow;
        border-right-color: transparent;
        border-left-color: transparent;
        border-bottom-color: transparent;
        border-style: solid;
        border-width: 160px 330px 0 0;
        content: " ";
        height: 0;
        position: absolute;
        top: -130px;
        width: 0;
        z-index: 30; }
      .shape--2:before {
        background: transparent;
        border-bottom-color: transparent;
        border-left-color: blue;
        border-right-color: transparent;
        border-style: solid;
        border-top-color: transparent;
        border-width: 130px 0 0 100vw;
        content: " ";
        height: 0;
        position: absolute;
        top: -130px;
        width: 0;
        z-index: 20; }

<div class="header">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam accusamus, quis labore sapiente et ab at! Repudiandae commodi nam quod? - There will be slider with different background, same color should be also in the shape.
</div>

<div class="shape">
  <div class="shape--1"></div>
  <div class="shape--2"></div>
</div>

<div class="content">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente eos maiores repellendus doloribus dignissimos iusto neque accusantium itaque. Aspernatur, cupiditate ab debitis placeat ad harum, nobis, iste deserunt impedit quaerat dicta nemo accusamus velit mollitia quis quos numquam labore distinctio eveniet. Consequatur culpa dicta harum quo quia similique, numquam tempore.
</div>

Answer 1

你可以使用一些毕达哥拉的东西来计算更精确的角度和大小，但这个想法就在这里。

＆＃13;

.shape {
  width: 100%;
  height: 5em;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0, 25% 0, 0 100%);
}

.header {
  text-align: center;
  font-variant: small-caps;
  font-size: 2em;
}

＆＃13;

<div class=header>
<div class=shape style="background-image: url('http://backgrounds.mysitemyway.com/wp-content/uploads/2009/03/bamboo-001126-asparagus-fern-green.jpg')"></div>
awesome header
</div>

<div class=content>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente eos maiores repellendus doloribus dignissimos iusto neque accusantium itaque. Aspernatur, cupiditate ab debitis placeat ad harum, nobis, iste deserunt impedit quaerat dicta nemo accusamus velit mollitia quis quos numquam labore distinctio eveniet. Consequatur culpa dicta harum quo quia similique, numquam tempore.

</div>

＆＃13;

Answer 2

最简单的方法是在包含div上设置背景颜色，并在实际图像上使用clip-path。这会给你你正在寻找的效果。

如果您不希望三角形与滑块一起移动，您可以创建另一个包装div或只创建一个伪后元素并将其放置在图像顶部。

Answer 3

使用内部元素包含图像的一个可能性。

旋转此元素，在伪内部有图像，反向旋转。

＆＃13;

.test {
    font-size: 30px;
    width: 400px;
    height: 200px;
    border: solid blue 1px;
    background-size: 200px 200px;
    background-repeat: no-repeat;
    position: relative;
}

.inner {
    position: absolute;
    width: 140%;
    height: 140%;
    bottom: 0px;
    right: 0px;
    z-index: -1;
    transform: rotate(26.4deg); 
    transform-origin: right bottom;
    overflow: hidden;
}

.inner:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-image: url(http://lorempixel.com/800/400);
    background-size: cover;
    transform: rotate(-26.4deg); 
    transform-origin: right bottom;
    
}

.triangle {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 0px;
    left: 0px;
    background-image: linear-gradient(to right bottom, red 50%, transparent 50%); 
    z-index: -2;
}

＆＃13;

<div class="test">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..
<div class="inner"></div>
<div class="triangle"></div>
</div>

＆＃13;

Answer 4

在这里，我做了一个jsfiddle take a look，只是根据你的回答我做了一些css更改。希望它有所帮助。

.shape-1{
  width: 0;
  height: 0;
  border-top: 0 solid transparent;
  border-bottom: 160px solid transparent;
  border-left: 0vw solid green;
  border-right: 97vw solid green;
  position:relative;
  top: -130px;
}


.shape-2{
    width: 0;
    height: 0;
    border-top: 0 solid transparent;
    border-bottom:  130px solid transparent;
    border-left: 42vw solid yellow;
    border-right: 0vw solid yellow;
    position:relative;
    top:0px;
}

.header{
    position: absolute;
    z-index: 1;
}


<div class="shape">
  <div class="header">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam 
    accusamus, quis labore sapiente et ab at! Repudiandae commodi nam quod?
  </div>
  <div class="shape-2"></div>
  <div class="shape-1"></div>
</div>

Answer 5

我所做的是首先创建保存照片的元素，然后我在体背景颜色中创建一个矩形形状，旋转它并使其溢出。然后我在里面放了另一个矩形块，我以与原三角相反的方式旋转：

HTML：

<div class="photo"></div>
<div class="triangle"></div>

CSS：

body {
  background: #fff;
  overflow:hidden;
  padding: 0;
  margin: 0;
}

.photo {
  width: 100%;
  height: 200px;
  background: red;
}

.triangle {
  position: absolute;
  background: #fff;
  left: -100px;
  right: -100px;
  height: 300px;
  transform: rotate(5deg);
  transform-origin: 100% 100%;
  overflow: hidden;
}

.triangle:after {
  content: "";
  display: block;
  width: 400px;
  height: 200px;
  position: absolute;
  background: orange;
  left: 0;
  top: -180px;
  transform: rotate(-20deg)
}

这是一个工作小提琴： https://jsfiddle.net/62o7wqom/2/

编辑：在body标签中添加overflow:hidden以避免出现水平滚动条，因为绝对定位的元素......溢出身体。

Answer 6

我注意到你已经接受了答案，但我想我仍然会发布一些可能有用的代码。考虑到你在项目中可能发生的其他事情，这需要进行一些微调，但它可以完成工作。

＆＃13;

.LeftT {
  position: absolute;
  top: 0rem;
  left: 0rem;
  border-left: 30rem solid #02A698;
  border-right: 6rem solid transparent;
  border-bottom: 8rem solid transparent;
  border-top: 0rem solid transparent;
}

.RightT {
  position: absolute;
  top: 0rem;
  left: -5rem;
  border-top: 0rem solid #004F49;
  border-left: 0rem solid transparent;
  border-bottom: 8rem solid transparent;
  border-right: 45rem solid #004F49;
}
p{
  position: absolute;
  top: 0rem;
  left: 15rem;
  z-index: 1;
}

＆＃13;

<div class="LeftT"></div>
<div class="RightT"></div>
<p style="color:white;text-align:right;padding-right:1rem;font-size:1.1rem;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis velit.
</p>

＆＃13;

如何创建两个覆盖的三角形？

6 个答案: