CSS这个角度背景怎么做？

Question

我怎样才能得到这样的东西？你能帮帮我吗？

Answer 1

这篇文章可能会对您有所帮助：https://www.viget.com/articles/angled-edges-with-css-masks-and-transforms

Answer 2

可以使用多背景混合图片+渐变：

body {
  margin:0;
  background:linear-gradient(65deg, white 45%, transparent 45%), url(http://lorempixel.com/600/400/nature);
  background-size:auto auto, cover;
  }
/* demo makeup */
div {
  height:100vh;
  width:50%;
  display:flex;
  }
p {
  margin:auto;
  }

<div><p>Whatever is on left</p></div>

如果最终的想法是有两个不同的图像，你也可以看看 mix-blend-mode 和这个演示 http://codepen.io/gc-nomade/pen/JRdEVO 为类似的问题制作的 here ...

编辑 2021

CSS shape 现在已经很好地实现了，shape-outside 在这里可能很有用：

具有 CSS 形状 (clip-path/shape-poutside/shape-margin) 和 CSS 计算的示例。

.half-slant {
  display: flex;
}

.half-slant header {
  flex: 1;
  text-align: right;
  background: #ededed;
}

.half-slant header img {
  float: right;
  height: 100%;
  clip-path: polygon( calc(100% - 55vw) 0, 100% 0, 100% 100%, calc(100% - 45vw) 100%);
  shape-outside: polygon( calc(100% - 55vw) 0, 100% 0, 100% 100%, calc(100% - 45vw) 100%);
  shape-margin: 0.5em;
  max-width: 100%;
}

.half-slant h1 {
  margin-top: clamp(1em, 40vw, 8%);
}

<section class="half-slant">
  <header>
    <img src="https://picsum.photos/id/1001/1200/400">
    <h1>Title</h1>
    <p>some text below</p>
    <p>and more</p>
  </header>
</section>

Answer 3

您可以通过 CSS 实现。

想法是有 3 个集团：

一个容器（将包含图像作为背景）
将旋转以模拟三角形的空块
a div 将包含文本

想法是旋转空块以获得所需的角度。要创建 "triangle" 效果，我们使用容器上的 overflow:hidden 作为遮罩（尽管旋转，您还需要使旋转块大于 hte 容器以覆盖它）。

然后定义三角形和内容块位置和 z-index 以叠加它们。

注意：您不必将图像作为容器块的背景。您还可以使用 img 标签显示并再次使用 z-index 将 3 个块显示在彼此之上。

.container,
.rotated-block {
  display:block;
}

.container {
  background: #000000;
  width: 600px;
  height: 350px;
  overflow: hidden;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

.rotated-block {
  position: absolute;
  zi-index: 1;
  width: 100%;
  min-height: 150%;
  background: #FFFFFF;
  transform: rotate(-20deg);
  left: -40%;
  top: -7%;
}

.content {
  position: relative;
  z-index: 3;
  top: 35%;
  left: 10%;
}

<div class="container">
    <div class="content">
        <p>Purly made with HTML & CSS</p>
     </div>
  <div class="rotated-block"></div>
</div>

CSS这个角度背景怎么做？

How to do this angle background by CSS?

css

background

angle

编辑 2021