css - 如何在 CSS 中创建十字？

Question

<分区>

Answer 1

此代码应该为您完成:

<div class="cross"></div>

<style>
    .cross {
        height: 20px;
        width: 20px;
        position: relative;
        //-webkit-transform: rotate(45deg); // this will make the cross an X
        //-moz-transform: rotate(45deg); // this will make the cross an X
        //transform: rotate(45deg); // this will make the cross an X
    }
    .cross:after, .cross:before {
        position: absolute;
        content: "";
        background: red;
    }
    .cross:after {
        top: 50%;
        left: 0;
        right: 0;
        height: 1px;
    }
    .cross:before {
        left: 50%;
        top: 0;
        bottom: 0;
        width: 1px; 
    }
<style>