[FIXED] How can I use %23 instead of # in Chrome?

Issue

How can I use %23 instead of # in Chrome?

html:

<div class="helloText">
hello text
</div>

css:

.helloText {
    background: #FF8500 url( "data:image/svg+xml;charset=utf8,<svg width='100%' height='100%' viewBox='0 0 1 1' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='none'><polygon points='0,1 1,1 1,0' style='fill:#fff;'></polygon></svg>" );
    background-repeat: no-repeat;
    background-size: 36px 36px;
    background-position: 100% 100%;

    padding: 20px;
    padding-bottom: 25px;
    margin-top: 35px;

    color: white;
    font-family: AvenirLT65Medium;
    font-size: 14pt;
}

res

In such a configuration everything works fine. The only but is that I am getting the following warning in Chrome console:

[Deprecation] Using unescaped '#' characters in a data URI body is deprecated and will be removed in M71, around December 2018. Please use '%23' instead. See https://www.chromestatus.com/features/5656049583390720 for more details.

Ok, let me change css to:

.helloText {
        background: #FF8500 url( "data:image/svg+xml;charset=utf8,<svg width='100%' height='100%' viewBox='0 0 1 1' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='none'><polygon points='0,1 1,1 1,0' style='fill:%29fff;'></polygon></svg>" );
        background-repeat: no-repeat;
        background-size: 36px 36px;
        background-position: 100% 100%;

        padding: 20px;
        padding-bottom: 25px;
        margin-top: 35px;

        color: white;
        font-family: AvenirLT65Medium;
        font-size: 14pt;
    }

res

Here is a fiddle. So, how do I substitute # to %29?

Also, I would like to notice that the part of an answer from here is wrong.

It tells that

The hashtag in the fill attribute triggers the message in my situation! Changing the # to %23 fixes the issue.

But it is not the case as I explained above.

Solution

Why using SVG when you can easily do this with simple CSS:

.helloText {
  background:
   linear-gradient(to bottom right,transparent 49.8%,#fff 50%),
   #FF8500;
  background-repeat: no-repeat;
  background-size: 36px 36px;
  background-position: 100% 100%;
  padding: 20px;
  padding-bottom: 25px;
  margin-top: 35px;
  color: white;
  font-family: AvenirLT65Medium;
  font-size: 14pt;
}

<div class="helloText">
  hello text
</div>

Answered By - Temani Afif

Answer Checked By - Senaida (PHPFixing Volunteer)