CODEWITHSUNDEEP
htmlcssbackgroundcss-shapes
user3387682
user3387682

Reputation: 101

Peculiar background CSS design

I would like to make a CSS background on "div" with a specific design and this design should be responsive (width and height). You can view the example generated with the properties "border" inside "div" with properties "position absolute" and separated the other "div", but this example isn't correct because when I increase the screen, the width isn't 100%.

Image (color purple and transparent): enter image description here

Code:

.trape {
  min-height: 250px;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  position: absolute;
  border-right: 2000px solid;
  border-right-color: #b60f80;
}
<link href="http://getbootstrap.com/docs/3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="container">
    <div class="trape"></div>
    <div class="col-xs-12 col-md-12 text-centeR">
      <h2 class="white">¡TEXT MODEL!</h2>
      <p>SIMULATION TEXT ALING MIDDLE</p>
    </div>
  </div>
</div>

Conclusión:

I would like to generate the css background responsive with the image exemple unused "border" and want to be able to put the text or other elements inside in the same div.

Thank you!

Upvotes: 1

Views: 83

Answers (1)

Temani Afif
Temani Afif

Reputation: 273004

Simply use gradient and multiple background:

.box {
  color:#fff;
  padding:30px 0 30px;
  background:
   linear-gradient(to bottom left,#b60f80 49%, transparent 51%) bottom/100% 30px no-repeat,
   linear-gradient(to top left,#b60f80 49%, transparent 51%) top/100% 30px no-repeat,  
   linear-gradient(#b60f80,#b60f80) center/100% calc(100% - 60px) no-repeat;
}

body {
 background:#ccc;
}
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque luctus lectus vel viverra tincidunt. Quisque vitae malesuada justo, nec porttitor felis. Sed aliquam sem turpis, sit amet pharetra ex blandit luctus. Morbi facilisis vel est eu interdum. Sed semper, erat a molestie tincidunt, purus velit luctus dolor, nec tristique ex neque eget tortor. Vestibulum a rhoncus ex. Aenean neque massa, porta a nulla non, faucibus pretium magna
</div>
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque luctus lectus vel viverra tincidunt. Quisque vitae malesuada justo, nec porttitor felis. Sed aliquam sem turpis, 
</div>

Upvotes: 3

Related Questions