0

I am trying to achieve a desired effect where the div that holds the sections background is slanted to one direction. I was able to make a div diagonally over the top portion of the div using This solution, but I realized There is another background that needs to be seen and adding a div on top of the main content would just be a line instead of the div just slanting on top.

Is there a way to pull this effect off through Css ?

enter image description here

Community
  • 1
  • 1
T0ny lombardi
  • 1,800
  • 2
  • 18
  • 35
  • possible duplicate of [How to create a div with a diagonal (or angled) top line](http://stackoverflow.com/questions/20362666/how-to-create-a-div-with-a-diagonal-or-angled-top-line) – 9Deuce Aug 07 '15 at 21:04
  • That solutions was to add 2 divs on top of the main content. Which, wouldn't work for this issue. – T0ny lombardi Aug 07 '15 at 21:06
  • Could you not just make a transparent div? – 9Deuce Aug 07 '15 at 21:15
  • 2
    [Is this what you're looking for?](http://jsfiddle.net/w2we8e9x/) –  Aug 07 '15 at 21:55

1 Answers1

1
<html>
<head>
<style>
div.background {
    background: url(klematis.jpg) repeat;
    border: 2px solid black;
}

div.transbox {
    margin: 30px;
    background-color: #ffffff;
    border: 1px solid black;
    opacity: 0.6;
    filter: alpha(opacity=60); /* For IE8 and earlier */
}

div.transbox p {
    margin: 5%;
    font-weight: bold;
    color: #000000;
}
</style>
</head>
<body>

<div class="background">
  <div class="transbox">
    <p>This is some text that is placed in the transparent box.</p>
  </div>
</div>

</body>
</html>

try this example

or go to http://www.w3schools.com/css/tryit.asp?filename=trycss_transparency

hope this helps

kapigsaan
  • 72
  • 5