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
. 
.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>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?