-1

enter image description here

I have a table with many such triangles having a dynamic background color on every td. We need to make triangle box responsive

Is it possible to make this CSSenter image description here? with responsive design

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Arpit Vaishnav
  • 4,739
  • 6
  • 39
  • 57

3 Answers3

1

You could use a linear gradient:

.test {
  width:50%; 
  height:300px;
  background-image: linear-gradient(to right bottom, #44F690 0%, #44F690 49.8%, #ffffff 50%, #47CFF3 50.2%, #47CFF3 100%);
}
<div class="test"></div>
Pete
  • 57,112
  • 28
  • 117
  • 166
0

Assuming that your current triangles are made with the classic border trick (zero-sized element, half-size borders with different colors), you cannot just make them responsive - percentage units are not supported for border sizes.

However, you can use an SVG background to same effect:

.test {
  width: 25%;
  height: 35vh;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHZpZXdCb3g9IjAgMCA2NCA2NCI+Cjxwb2x5Z29uIHBvaW50cz0iMCwwIDY0LDAgMCw2NCIgZmlsbD0iIzQ0RjY5MCIvPgo8cG9seWdvbiBwb2ludHM9IjY0LDAgNjQsNjQgMCw2NCIgZmlsbD0iIzQ3Q0ZGMyIvPgo8bGluZSB4MT0iNjQiIHkxPSIwIiB4Mj0iMCIgeTI9IjY0IiBzdHlsZT0ic3Ryb2tlOndoaXRlO3N0cm9rZS13aWR0aDoyIi8+Cjwvc3ZnPg==);
  background-size: 100% 100%;
  resize: both;
}
/*
Sample SVG:
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 64 64">
<polygon points="0,0 64,0 0,64" fill="#44F690"/>
<polygon points="64,0 64,64 0,64" fill="#47CFF3"/>
<line x1="64" y1="0" x2="0" y2="64" style="stroke:white;stroke-width:2"/>
</svg>
</svg>
Note that you need to strip width/height properties and make sure that it has a viewbox, else it'll center instead of stretching
(see https://stackoverflow.com/a/56459700/5578773)
*/
<div class="test"></div>

(perhaps overlay the splitter-line as a separate background/element so that it doesn't look unusual at overly stretched ratios)

YellowAfterlife
  • 2,967
  • 1
  • 16
  • 24
0

In this example you it is possible to change the color of the border using background color

.test {
  width: 25%;
  height: 35vh;
  background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHZpZXdCb3g9IjAgMCA2NCA2NCI+PHBvbHlnb24gcG9pbnRzPSIwLDAgNjIuNTg1NzgsMCAwLDYyLjU4NTc4IiBmaWxsPSIjNDRGNjkwIi8+PHBvbHlnb24gcG9pbnRzPSI2NCwxLjQxNDIxIDY0LDY0IDEuNDE0MjEsNjQiIGZpbGw9IiM0N0NGRjMiLz48L3N2Zz4=");
  background-size: 100% 100%;
  resize: both;
}
/*
The sample SVG is now:
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 64 64">
<polygon points="0,0 62.58578,0 0,62.58578" fill="#44F690"/>
<polygon points="64,1.41421 64,64 1.41421,64" fill="#47CFF3"/>
</svg>
*/
<div class="test"></div>

You see there is no line element in the SVG code.

Migats21
  • 176
  • 11