CODEWITHSUNDEEP
cssbackground
BrightTime
BrightTime

Reputation: 17

Responsive triangle styled background in CSS

I'm looking to make a background, like the image I've attached, I know its not exactly a triangle but it was the best word I could think of. I don't want to use an image for the background for responsive reasons, but is there a way to create something like that image?

Upvotes: 0

Views: 329

Answers (3)

G-Cyrillus
G-Cyrillus

Reputation: 105863

You may use linear-gradient and background-size: (easy to reverse to stack them)

div {
  padding:7.5% 1em;
  margin:-2.5% 1em;
  background:linear-gradient(178deg , transparent 30%, #A65417 31%) top left no-repeat,
    linear-gradient(2deg, transparent 30%, #A65417  31%) bottom left no-repeat;
  background-size: 100% 51%;
}
div:nth-child(even) {
    background:linear-gradient(-178deg , transparent 30%, #A65417 31%) top left no-repeat,
    linear-gradient(-2deg, transparent 30%, #A65417  31%) bottom left no-repeat;
  background-size: 100% 51%;
}
html {/* see transparency */
  background:linear-gradient(30deg,gray,purple,yellow,lime,tomato);
  padding:5% 0
}
<div> Please see snippet in fullpage mode & resize window</div>
<div> Please see snippet in fullpage mode & resize window</div>
<div> Please see snippet in fullpage mode & resize window</div>
<div> Please see snippet in fullpage mode & resize window</div>
<div> Please see snippet in fullpage mode & resize window</div>

Upvotes: 1

Marius Brits
Marius Brits

Reputation: 312

something like this perhaps https://jsfiddle.net/dkfm7ymo/3/

<div id="trapezoid"></div>

#trapezoid { border-right: 450px solid orange; border-top: 50px solid transparent; border-bottom: 50px solid transparent; height: 100px; width: 0px; }

Upvotes: 0

Liberateur
Liberateur

Reputation: 1487

<style>
  .parent {
    width: 500px; height: 300px;
    position: relative;
    background: #f00;
    overflow: hidden;
  }
  .parent:before, .parent:after {
    content: '';
    width: 200%; height: 100px;
    left: -50%;
    margin: -50px 0;
    position: absolute;
    background: #fff;
  }

  .parent:before {
    top: 0;
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
  .parent:after {
    bottom: 0;
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    transform: rotate(5deg);
  }
</style>

<div class="parent"></div>

Upvotes: 0

Related Questions