How to make a square fork button in css style?

the code is as follows:

    <style>
        .cancel-btn {
            background: -sharpccc;
            color: white;
            padding: 1em;
        }
    </style>
</head>
<body>
    <h1>Testing</h1>

    <span class="cancel-btn"></span>

</body>

the effect of the picture is like this. The height is always a little larger than the width. How should I make a square button? Thank you, boss Thumt

Css html html5 javascript node.js

Mar.19,2021

.cancel
    {
        width: 100px;
        height: 100px;
        background-color: -sharp333333;
        position: relative;
    }
    .cancel::before
    {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 50px;
        height: 10px;
        background-color: -sharpffffff; 
        transform: translateX(-50%) translateY(-50%) rotate(45deg);
    }
    .cancel::after
    {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 50px;
        height: 10px;
        background-color: -sharpffffff; 
        transform: translateX(-50%) translateY(-50%) rotate(-45deg);
    }

<div class="cancel">

    </div>

https://codepen.io/jx915/pen/.

Previous: How does angular get to use DOM elements in a component?

Next: How to set the position of the axis to the lower point of the tail in echarts?