CODEWITHSUNDEEP
htmlcss
Arel
Arel

Reputation: 3938

Angled CSS background with bottom border.

I'm trying to create a CSS background that looks like this:

enter image description here

I've been able to create the shape, but can't figure out how to add the bottom border, and am starting to think my approach may be the problem.

So far I have the following CSS:

#top-background-flag {
  border-top: 2px solid #C2C2C2;
  background: linear-gradient(
    to bottom right,
    #5DCAD3 50%,
    transparent 50.5%
  )
  no-repeat bottom, /* bottom part */
  linear-gradient(100deg, #5DCAD3, #5DCAD3) no-repeat top;
  /* top portion */
  padding-bottom: 3.5rem;
  border-bottom: 2px solid #C2C2C2;
  background-size: 100% 3rem, 100% calc(100% - 3rem)
}

and HTML:

<div id=top-background-flag>
  A fun title
</div>

and a code pen: https://codepen.io/arel/pen/PKXGmd

My problem right now is that the bottom border is a horizontal line, and I can't figure out how to have it follow the angle of the box.

Here is what I have so far:

enter image description here

Upvotes: 0

Views: 2165

Answers (3)

LightBender
LightBender

Reputation: 4253

Trying to use a linear gradient may not be the best solution here.

Appending an object with a little CSS transformation some judicious layering will accomplish what you want and will have fewer properties to adjust if you want to change the angle later.

#top-background-flag {
  border-top: 2px solid #C2C2C2; /* top border on the parent */
  position: relative;
  padding-bottom: 3.5rem;
  overflow: hidden;
}

#top-background-flag:before {
  background-color: #5DCAD3;
  transform: skewy(-4deg); /* angle you want */
  transform-origin: bottom left;
  border-bottom: 2px solid #C2C2C2; /* bottom border skews with the object */
  content: ' ';
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: -1;
  bottom: 0;
}

Here is a working example to play with

Upvotes: 3

McHat
McHat

Reputation: 860

Add this CSS to fake a bottom border:

#top-background-flag:after {
  content: "";
  background-color: red;
  height: 2px;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 23px;
  transform: rotate(-5.5deg);
}

Here is a working fork of your codepen: https://codepen.io/anon/pen/XaojPp

Upvotes: 1

Dekel
Dekel

Reputation: 62636

I'm not sure that this is what you are looking for, but you can use the :after pseudo class with the content trick:

body {
  max-width: 500px;
}

#top-background-flag {
  border-top: 2px solid #C2C2C2;
  background: linear-gradient(
    to bottom right,
    #5DCAD3 50%,
    transparent 50.5%
  )
  no-repeat bottom, /* bottom part */
  linear-gradient(100deg, #5DCAD3, #5DCAD3) no-repeat top;
  /* top portion */
  padding-bottom: 3.5rem;
  border-bottom: 2px solid #C2C2C2;
  background-size: 100% 3rem, 100% calc(100% - 3rem);
  position: relative;
}

#top-background-flag:after {
  content: '';
  border-bottom: 1px solid red;
  border-top: 1px solid red;
  position: absolute;
  width: 100%;
  bottom: 22px;
  left: 0;
  transform: rotate(-5.5deg);
}
<div id=top-background-flag>
  A fun title
</div>

Upvotes: 0

Related Questions