Div of same style but variable color

css variables javascript
css custom properties
css variables ie11
css variables fallback
scss variables
css variables support
css variables tutorial
global css variables

I am writing an HTML page for private purposes that should display the content of a matrix in a graphical way. Essentially, I have a table made of divs, and each of the cells has a shape. I took, for example, the triangle shapes from here https://www.w3schools.com/howto/howto_css_shapes.asp. As you can see in their example, the background color of the div is encoded in the style definition of the div.

What I would like to do now is to have the same shape everywhere in all cells, but change the color arbitrarily. What I could do is to make two divs with the same style definitions but then only separate lines for where the color is involved. But the point is, I have an arbitrary amount of different colors (it actually depends on the matrix), thus, this approach is not preferrable.

Instead, and this is my question: is it possible to change the color at call of the div? I.e. instead of having a single class with the same color or multiple copies of the same class with different colors, I would now like to change the color at the call of the div. Is it possible to do something like this:

<div class="triangle(red)"></div>
<div class="triangle(green)"></div>
<div class="triangle(light-red)"></div>

and so on for the various colors? I googled for variable usage in css and found some pages, but it seems to me that they are rather static, i.e. one defines them at the top or via js but then they are still hard-coded to the style definition, so they do not really change from div to div.

Thanks for any advice!


If by "change the color at call of the div" you mean changing the color of the triangle at runtime, then no. HTML and CSS are not programming languages. You can, however, create classes that just change the color to make your code semantic and reduce the amount of recycled code.

Some shapes allow you to do colors using the background: color property, but triangles are colored via the border property. For an upright triangle, you could do something like this:

.triangle {
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;

.red {
  border-bottom: 50px solid red;

.green {
  border-bottom: 50px solid green;

.light-red {
  border-bottom: 50px solid #f78889;
<div class="triangle red"></div>
<div class="triangle green"></div>
<div class="triangle light-red"></div>

Div of same style but variable color - css - html, What I could do is to make two divs with the same style definitions but then only separate lines for where the color is involved. But the point is, I have an arbitrary � So, if the first div (.pink) has that background color applied the color will show though all the divs unless a background color is applied to each internal div. This isn’t the background color of the ‘pink’ div overiding the ‘blue’ or ‘red’ divs…it’s just that their backgrounds are transparent.

Use 4 CSS classes - 1 for the triangle and 3 more for each color. As this triangle color comes from its border-bottom, apply the color by making a CSS like this: .triangle.color-name {border-bottom-color: the-color;}

.triangle {
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 50px solid #555;

.triangle.red {
  border-bottom-color: red;

.triangle.green {
  border-bottom-color: green;

.triangle.light-red {
  border-bottom-color: #f44;
<div class="triangle red">&nbsp;</div>
<div class="triangle green">&nbsp;</div>
<div class="triangle light-red">&nbsp;</div>

Using CSS custom properties (variables), Custom properties (sometimes referred to as CSS variables or cascading For example, the same color might be used in hundreds of different places, Text < span class="five">5 - more text</span></div> <input class="three"> in place of var(--text-color) , but 16px is not a valid property value for color . Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that contain specific values to be reused throughout a document. They are set using custom property notation (e.g., --main-color: black;) and are accessed using the var() function (e.g., color: var(--main-color);).

Thank you for your answers. So it is not possible as I originally was hoping for (I wanted to avoid making x subclasses if I have x colors), but apparently there is no way around that. Thank you! conni

What do you name color variables?, Have you succeeded at writing CSS that uses color variables in a manner agnostic In a similar fashion, I've tried keeping colors within a Sass map, like: being nice for tints or shades of the same color, but then why not regular numbers ? </div> <small>Click on the color picker to interact</small> </div>. The rule sets the color of #f00 (red) on these four selectors, which is preferable to writing four separate selectors to achieve the same result. Any Selector Can Be Grouped You can place any valid selector in a group, and all elements in the document that match all the grouped elements will have the same style based on that style property.

Use CSS to change the style of each row depending on the content , in displaying your data. But if your template requires rules to be applied to specific CSS selectors, using. Display and style elements depending on their value. 1. Display element B if <p class="no_grades">No grades yet</p> </div> color : orange Hi, All the examples here are form the = (equal) condition. How do I� I like that in CSS Variables, it’s possible to add a default value, in case the variable hasn’t been set. In the above code, I used var(--gap, 0).In case the author didn’t provide the --gap variable, the default will be zero.

.css(), Note that the computed style of an element may not be the same as the value specified may return CSS color values that are logically but not textually equal, e.g., #FFF, #ffffff As of jQuery 3.2, CSS Custom Properties (also called CSS Variables) are Get the width, height, text color, and background color of a clicked div. The above code would style the div using a color value set on the errorMessageColor property of your component. Thanks to the data binding, whenever that property changes, the div would get a new color.

Modifying the document, But as of now it's only in a variable named div , not in the page yet. 4 px ; color : #3c763d ; background-color : #dff0d8 ; } </ style > < script > let div insertAdjacentText(where, text) – the same syntax, but a string of text is� Variables in CSS should be declared within a CSS selector that defines its scope. For a global scope you can use either the :root or the body selector. The variable name must begin with two dashes (--) and is case sensitive! The syntax of the var() function is as follows:

  • Well, if i understand correctly you could create color classes (such as .red) that all they do is change color. Then, at the div decleration you will write this: class="triangle red.
  • Make a class for each colour. .green{ background: green} .red { background: red} . Then add to your class attribute like so: <div class="triangle green"></div><div class="triangle red" ></div>
  • consider CSS variable (example : stackoverflow.com/a/55091778/8620333)
  • No, you can't do that dynamically w/o script, or setting up static classes/variables. CSS is not a programming language, hence does not have methods one can run (other than calc() and attr() for now)