1

I'm trying to create a page where the 'background' is made out of two different divs. Currently, they are split by a vertical line and I am trying to change it to be a diagonal line, representing the image below:

two divs

However it seems I am unable to work it out properly. My HTML file is as follows:

<!DOCTYPE html>
<html>
  <head>
    <title>Studenten Opiniepanel</title>

    <link rel="stylesheet" type="text/css" href="css/main.css">
  </head>

  <body>
    <section class="container">
      <div class="left-half">
        <article>
          <img src="img/logo-hsv-white.png" alt="Hanze Studentenbelangen Vereniging" />
          <h1>Student aan de Hanzehogeschool Groningen?</h1>

          <button class="subscribe" id="hsv">Inschrijven voor het Studenten Opiniepanel</button>

    </article>
  </div>
      <div class="right-half">
        <article>
          <img src="img/logo-sog-white.png" alt="Studenten Organisatie Groningen" />
          <h1>Student aan de Rijksuniversiteit Groningen?</h1>

          <button class="subscribe" id="sog">Inschrijven voor het Studenten Opiniepanel</button>

        </article>
      </div>
    </section>
  </body>
</html>

And my CSS:

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

* {
  box-sizing: border-box;
}

body {
  font-size: 1.25rem;
  font-family: sans-serif;
  line-height: 150%;
  text-shadow: 0 2px 2px #b6701e;
}

section {
  color: #fff;
  text-align: center;
}

div {
  height: 100%;
}

article {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  padding: 20px;
}

h1 {
  font-size: 1.75rem;
  margin: 0 0 0.75rem 0;
}

.container {
  display: table;
  width: 100%;
}

.left-half {
  background: #f49800;
  position: absolute;
  left: 0px;
  width: 50%;
}

.right-half {
  background: #F38E09;
  position: absolute;
  right: 0px;
  width: 50%;
}

I've already tried using transform: skew() but this only does half the job. What would be the best way of achieving what I've drew in the image?

1

2 Answers 2

2

Try this:

HTML

<div id="container"></div>

CSS

#container {
  position: relative;
  height: 200px;
  width: 200px;
  overflow: hidden;
  background-color: grey;
}

#container:before { 
  content: '';
  position: absolute;
  left: 35%;
  width: 200%; 
  height: 200%; 
  background-color: rgb(255, 255, 255); /* fallback */
  background-color: rgba(255, 255, 255, 0.5);
  top: 0;
  -webkit-transform: rotate(25deg);
  -moz-transform: rotate(25deg);
  transform: rotate(25deg);
}

Here's a Fiddle to demo it out. Adjust as you need.

1
  • And another Fiddle to demo a wider div.
    – dokgu
    Dec 22, 2016 at 18:53
0

I have set the skew that you tried, and adjusted some positioning.

Here is the result:

.container {
  display: table;
  width: 100%;
}
.half {
  position: absolute;
  width: 50%;
  transform: skewX(-15deg);
}
.right-half {
  left: 50%;
  background: lightblue;
  box-shadow: 100px 0px 0px lightblue;
  overflow: hidden;
}
.left-half {
  right: 50%;
  background: lightgreen;
  box-shadow: -100px 0px 0px lightgreen;
}
article {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) skewX(15deg);
  ransform: translate(-50%, -50%);
  width: 100%;
}
html,
body {
  margin: 0;
  padding: 0;
}
* {
  box-sizing: border-box;
}
body {
  font-size: 1.25rem;
  font-family: sans-serif;
  line-height: 150%;
  text-shadow: 0 2px 2px #b6701e;
}
section {
  color: #fff;
  text-align: center;
}
div {
  height: 100%;
}
h1 {
  font-size: 1.75rem;
  margin: 0 0 0.75rem 0;
}
<section class="container">
  <div class="half left-half">
    <article>
      <img src="http://lorempixel.com/400/200" alt="Hanze Studentenbelangen Vereniging" />
      <h1>Student aan de Hanzehogeschool Groningen?</h1>

      <button class="subscribe" id="hsv">Inschrijven voor het Studenten Opiniepanel</button>

    </article>
  </div>
  <div class="half right-half">
    <article>
      <img src="http://lorempixel.com/400/200" alt="Studenten Organisatie Groningen" />
      <h1>Student aan de Rijksuniversiteit Groningen?</h1>

      <button class="subscribe" id="sog">Inschrijven voor het Studenten Opiniepanel</button>

    </article>
  </div>
</section>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.