Is this possible to make "double sort" icon only in css?

Question

Is there a way to make this sort of icon only in css?

I know that I can take this icon from font-awesome but I need a way to make it only in CSS.

Answer 1

It is possible. I created a main div wrapper as flex box. This contains two child divs. There are css commands to create a triangle.

.wrapper
{
  display:flex;
  flex-direction:column;
  padding:5px;
}

.top
{
  
  width: 0; 
  height: 0; 
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  
  border-bottom: 20px solid black;
  margin-bottom:5px;
}

.bottom
{

  width: 0; 
  height: 0; 
  
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 20px solid #f00;
}

<div class="wrapper">
  <div class="top">
  </div>
  <div class="bottom">
  </div>

</div>

Answer 2

Here's a small webcomponent that does it:

class DoubleIcon extends HTMLElement {
    get css() {
      return `
        :host { 
            display: inline-block;
        }
        .root {
            display:flex;
            flex-direction:column;
            padding: 5px;
            --size: ${this.size}px;
        }
        .root::before {
            content: '';
            width: 0; 
            height: 0; 
            border-left: calc(3 * var(--size)) solid transparent;
            border-right: calc(3 * var(--size)) solid transparent;
            border-bottom: calc(4 * var(--size)) solid #ccc;
            margin-bottom: var(--size);
        }
        
        .root::after {
            content: '';
            width: 0; 
            height: 0; 
            border-left: calc(3 * var(--size)) solid transparent;
            border-right: calc(3 * var(--size)) solid transparent;
            border-top: calc(4 * var(--size)) solid #ccc;
        }`
    }

    constructor() {
        super();
        this.attachShadow({mode: 'open'})
        this.connected = false;
        this.size = 10;
    }

    connectedCallback() {
        if (this.connected) return;
        this.appendStyle();
        const i = document.createElement('i');
        i.className = 'root';
        this.shadowRoot.appendChild(i);
        this.connected = true;
    }

    static get observedAttributes() {
        return ['size'];
    }

    appendStyle() {
        if (this.styleEl) this.styleEl.remove();
        this.styleEl = document.createElement('style');
        this.styleEl.innerHTML = this.css;
        this.shadowRoot.appendChild(this.styleEl);
    }

    attributeChangedCallback(attr, oldVal, newVal) {
        if (newVal === null) {
            this.size = 5;
            return;
        } else {
            this.size = Number(newVal) || 5;
        }
        this.appendStyle();
    }
}
customElements.define('double-icon', DoubleIcon);

<double-icon size="2"></double-icon>
<double-icon size="6"></double-icon>