Eliecer Thoms Eliecer Thoms - 7 months ago 25
HTML Question

how can i have background shapes with css?

I achieved something like this using a div with the css property of transform: skew();

image

however I'd like it to have kind of a curve where the line is going up, so if you could give me a step in the right direction or tell me more about the easiest ways of inserting a responsive svg graphic art to specifically the background of the elements or the page itself it'd be much appreciated

EDIT: HERE'S THE CSS USED

.skewed-bg{
background: #830024;
-webkit-transform: skew(0deg, -9deg);
transform: skew(0deg, -9deg);
margin-top: -200px;
}
.skewed-bg .container{
-webkit-transform: skew(0deg, 9deg);
transform: skew(0deg, 9deg);
padding-top: 200px;
color: white;
}

Answer

You can apply the skew transform to a pseudo element (like ::after) without using SVG or affect the main element (also reducing the need for extra HTML element):

header {
  background: #CCC;
  padding: 2em;
}

.skewed-bg {
    background: #830024;
    color: #FFF;
    padding: 2em;
    position: relative;
    min-height:300px;
    overflow:hidden;
}
.skewed-bg::after {
  content: '';
  position: absolute;
  bottom: -75%; left: 0; right: 0;
  height:100%;
  background:#FFF;
  transform: skew(0deg, -9deg);
}
<header>Power</header>
<div class="skewed-bg">
  Quienes Somos.
</div>

jsFiddle: https://jsfiddle.net/w6690acn/1/