问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

怎么通过css样式制作一个正方形的叉子按钮?

头像
呼哈
    21756177

    代码如下:

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

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

</body>

    图片效果是这样的,高度总是要比宽度大一点儿，请问应该怎么制作正方形的按钮呢？谢谢大佬T_T

    clipboard.png

    node.jsjavascripthtml5htmlcss
    阅读 3.6k
    2 个回答
    得票最新
    头像
    alexxxcs1
      33712639
      ✓ 已被采纳
      .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>
      头像
      天空影
        1.1k41432
        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题