CODEWITHSUNDEEP
htmlcss
curious1
curious1

Reputation: 14737

A background with two responsive triangles

I have the following html:

<div class="text-beside-wrapper">
  <div class="text-beside">
      some text goes here.
  </div>
</div>

CSS is as follows:

body {
    padding: 0;
    margin:0;
  
}
.text-beside-wrapper {
    background-color: #e3dfdc;
    height: 415px;
    width: 300px;
}

.text-beside-wrapper:after {
    border-right: 300px solid transparent;
    border-top: 415px solid #dbd5c5;
    content: '';
    position: absolute;
    top: 0;
    width: 0;
    z-index: 5;
}

This is the demo: https://jsfiddle.net/zby230f9/7/

The problem is that it is not responsive. I hope to have the same design, and the two triangles maintain the cutting line connecting two opposite corners no matter what the height and width of the area. Is this doable with CSS?

Update

I forgot to mention that height: 415px and width: 300px are used above because that is how the text on desktop makes it that way. I don't want to maintain the same ratio because the height and width of the text area (class text-beside) could change with any ratios.

Upvotes: 0

Views: 75

Answers (3)

Thodoris
Thodoris

Reputation: 742

Use this css. vh is view height and vw is view width, so 100% responsive :) Careful if you use % as mentioned in another answer the height of the parent container needs to be defined.

body {
  margin: 0;
  padding: 0;
}

.text-beside-wrapper {
  background-color: #e3dfdc;
  height: 40vh;
  width: 30vw;
}

.text-beside-wrapper:after {
  border-right: 30vw solid transparent;
  border-top: 40vh solid #dbd5c5;
  content: '';
  position: absolute;
  top: 0;
  width: 0;
  z-index: 5;
}
<div class="text-beside-wrapper">
  <div class="text-beside">
  </div>
</div>

Upvotes: 2

Renzo Calla
Renzo Calla

Reputation: 7716

you can do it using linear gradients https://jsfiddle.net/RACCH/54s72wxq/

background:linear-gradient(to bottom right, transparent calc(50% - 1px), black calc(50% - 1px), black 50%, transparent 50%) ;

Upvotes: 1

Dexter0015
Dexter0015

Reputation: 1039

Just a thought, not tested though: You can use an SVG file as background with background-size: 100% 100%; , it should work.

Or a background-size: cover; if you want your background to keep it ratio (but may be cut if the block have a crammed ratio than the svg).

Upvotes: 0

Related Questions