代码如下: <style> .cancel-btn { background: #ccc; color: white; padding: 1em; } </style></head><body> <h1>Testing</h1> <span class='cancel-btn'></span></body>图片效果是这样的,高度总是要比宽度大一点儿，请问应该怎么制作正方形的按钮呢？谢谢大佬T_T
2 回答
GCT1015
TA贡献1827条经验 获得超4个赞
.cancel
{
width: 100px;
height: 100px;
background-color: #333333;
position: relative;
}
.cancel::before
{
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 10px;
background-color: #ffffff;
transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.cancel::after
{
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 10px;
background-color: #ffffff;
transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}
<div class="cancel">
</div>
添加回答
举报
0/150
提交
取消