html - 将设计转录为 HTML 和 CSS

Question

我已经搜索了使用 css 屏蔽图片的方法，我发现了 clip-path 我可以按照我想要的方式在图片中成功地剪切图片，但我现在的主要问题是我如何只会将所有文本“推”到右侧，我应该使用网格吗？或者我可以纯粹使用 CSS 使用 float 之类的东西来实现吗？

尝试使用 float，但在其他段落中效果不佳

.

Answer 1

考虑到多个背景层，您可以轻松实现这一点，然后您可以轻松调整内容以匹配背景:

body {
  margin:0;
  height:100vh;
  background:
    linear-gradient(to bottom right, transparent 49%,red 50%)calc(100% - 200px) 0/100px 100%,
    linear-gradient(red,red) right/200px 100%,
    url(https://picsum.photos/1000/800?image=1069) center/cover;
  background-repeat:no-repeat;
}

.box {
  width:200px;
  height:100%;
  margin-left:auto;
  padding:20px;
  text-align:center;
  box-sizing:border-box;
}

<div class="box">
  <h1>title</h1>
  <p>some content here</p>
</div>