怎么通过css样式制作一个正方形的叉子按钮?
代码如下:
<style>
.cancel-btn {
background: #ccc;
color: white;
padding: 1em;
}
</style>
</head>
<body>
<h1>Testing</h1>
<span class='cancel-btn'></span>
</body>
图片效果是这样的,高度总是要比宽度大一点儿，请问应该怎么制作正方形的按钮呢？谢谢大佬T_T
炎炎设计浏览 570回答 2
2回答
-
GCT1015
.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>
随时随地看视频慕课网APP
相关分类
JavaScript