SVG polygon fill declared in css class not working

Question

I'm trying to create a button with a triangle-shaped arrow on the right side with the ability to grow a bit when a user hovers it.

The most common solution to draw a triangle is to use very thick border around an object and then make top, right and bottom borders invisible. It's simple but not really portable - requires complex calculations in case of button resizing.

I've chosen a different approach - the triangle amendment is drawn by using SVG, using ::after pseudo selector.

SVG is drawn by using polygon element and drawn as the background.

To make styling possible, the polygon has a class name. When I put the SVG inline, color modification by the CSS class works as expected. Unfortunately, when the SVG is displayed from CSS - set by the content or background-image property - the class seems to be ignored.

Any idea how to change the color of the polygon in the background?

Following is my code. It displays two red buttons and two black ones, all with red arrows. At the bottom is the green triangle which is drawn by the same SVG used in CSS but placed directly in HTML. The green color is taken from class definition so I'm sure the SVG and CSS class definition are correct, and all the arrowheads should be this green.

.arrowbtn {
  position: relative;
  display: inlne-block;
  height: 40px;
  background: red;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;

  transition: padding 0.4s;
  -webkit-transition: padding 0.4s;
}
.arrowbtn::after {
  content: "";
  position: absolute;
  top: 0;
  right: -20px;
  height: 100%;
  width: 20px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100px' height='100px' preserveAspectRatio='none'><polygon class='arrow' fill='red' points='0,0 100,50 0,100' /></svg>");
}

.arrowbtn:hover {
  padding-right: 45px;
}
.arrowbtn.large {
  font-size: x-large;
  padding: 30px 30px 30px 30px;
  line-height: 60px;
}
.arrowbtn.large:hover {
  padding: 30px 60px 30px 30px;
}
.arrowbtn.large::after {
  width: 40px;
  right: -40px;
}
.arrowbtn.black {
  background-color: #000;
  color: #fff;
}

/* this should change the fill color for the triangle and is not working */
.arrow {
  fill: green !important;
}

/*
.arrowbtn.black::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'     width='100px' height='100px' preserveAspectRatio='none'><polygon id='arrow2' class='myarrow' points='0,0 100,50 0,100' /></svg>");
}*/

<h1>Button with SVG Arrow</h1>
<div>
  <p>Regular button</p>
  <a href="#" class="arrowbtn">Read More</a>
</div>
<div>
  <p>Large Button</p>
  <a href="#" class="arrowbtn large">Download the document here</a>
</div>

<div>
  <p>Regular button black</p>
  <a href="#" class="arrowbtn black">Read More</a>
</div>
<div>
  <p>Large Button Black</p>
  <a href="#" class="arrowbtn large black">Download the document here</a>
</div>
<div>
  <p>Plain SVG styled with CSS</p>
  <svg xmlns='http://www.w3.org/2000/svg' width='100px' height='100px' preserveAspectRatio='none'><polygon class='arrow' fill='red' points='0,0 100,50 0,100' /></svg>
</div>

I am seeing a green arrowhead after the red and black arrows - what should I be seeing? — A Haworth, Oct 08 '21 at 11:55
I see 2 red buttons with red triangles and 2 black buttons with red triangles. All of them should be green as the last one. The green one is for testing purpose - it is the same svg used in the CSS, but placed directly in the HTML — cyberhubert, Oct 08 '21 at 12:02
When you use SVG as the `background-image`, the SVG does not become a part of the DOM, and so it cannot be styled. — tromgy, Oct 08 '21 at 12:06

SVG polygon fill declared in css class not working

0 Answers0