鍍金池/ 問答/HTML5  HTML/ 怎么通過css樣式制作一個正方形的叉子按鈕?

怎么通過css樣式制作一個正方形的叉子按鈕?

代碼如下:

    <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

回答
編輯回答
編輯回答
局外人
.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>
2017年3月16日 11:54