用第二个旋转的div创建div

Question

所以目前我得到的div容器具有简单的背景色。

* {
  font-family: Helvetica;
}

body {
  margin: 0;
}

.section {
  padding: 20px 200px;
}

#contact {
  background: #2674ff;
  color: #ffffff;
}

.contactLink {
  color: #2c323e;
}

.contactLink:hover {
  color: #1b212d;
}

<div id="contact" class="section">
  <h2>
    Contact
  </h2>
  <h3>
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    </p>
    <p>
      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </p>
  </h3>
</div>

我想创建第二个div，它从左下角旋转到右上角。整个过程应该对屏幕大小变化具有响应/动态。理想的示例是

我尝试了

background: linear-gradient(135deg, #1c96fc, #166efd)

但是显然我需要第二个div。如何复制这张照片？

Answer 1

如果您想要图像中的内容，则不需要其他<div>。您只需为第二种颜色设置色标即可。

以下是使用CSS custom properties和固定长度color stops的示例。通过将var(--whatever)更改为文字颜色，将100px更改为某些百分比，您可以轻松地交换为静态值和基于百分比的色标。

:root {
  --dark-blue: #1776fd;
  --medium-blue: #1989fd;
  --light-blue: #1c95fc;
}

html,
body {
  margin: 0;
  padding: 0;
}

main {
  font-family: arial;
  width: 100vw;
  height: 100vh;
  color: white;
  background: linear-gradient( -30deg, var(--light-blue), var(--light-blue) 100px, var(--dark-blue) 100px, var(--light-blue));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

section {
  display: flex;
  flex-direction: column;
  align-items: center;
}

p {
  text-align: center;
}

button {
  background-color: white;
  color: black;
  margin: 0;
  padding: 1em;
  border: 2px solid white;
}

button.clear {
  background-color: transparent;
  color: inherit;
}

<main>
  <section>
    <h1>Ready to get Started?</h1>
    <p>Request a demo or talk to our technical sales team to answer your questions and explore your needs.</p>
    <div>
      <button type="button">Request a Demo</button>
      <button class="clear" type="button">Talk to Sales</button>
    </div>
  </section>
</main>

Answer 2

尝试一下：

#contact {
    background: rgb(38,116,255);
    background: -moz-linear-gradient(-45deg, rgba(38,116,255,1) 0%, rgba(38,116,255,1) 66%, rgba(104,159,255,1) 66%, rgba(37,141,200,1) 98%);
    background: -webkit-linear-gradient(-45deg, rgba(38,116,255,1) 0%,rgba(38,116,255,1) 66%,rgba(104,159,255,1) 66%,rgba(37,141,200,1) 98%);
    background: linear-gradient(135deg, rgba(38,116,255,1) 0%,rgba(38,116,255,1) 66%,rgba(104,159,255,1) 66%,rgba(37,141,200,1) 98%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2674ff', endColorstr='#258dc8',GradientType=1 );
    color: #ffffff;
}