CODEWITHSUNDEEP
htmlcss
Question3r
Question3r

Reputation: 3762

create div with second rotated div

so currently I got this div container with a simple background color.

* {
  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>

I want to create a second div that is rotated from bottom left to top right. The whole thing should be responsive / dynamic on screen size changes. The desired example would be

rotated

I tried

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

but obviously I need a second div. How can I replicate this picture?

Upvotes: 1

Views: 40

Answers (2)

zero298
zero298

Reputation: 26877

If you want what you have in the image, you don't need another <div>. You just need a color stop for the second color.

Here is an example using CSS custom properties and a fixed length color stops. You can easily swap to static values and percentage based color stops by changing the var(--whatever) to the literal color and the 100px to some percentage.

: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>

Upvotes: 1

Luciano Carvalho
Luciano Carvalho

Reputation: 111

Try this:

#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;
}

Upvotes: 0

Related Questions