Question

如何在CSS中创建交叉？我只需要一个1像素宽和20像素高的十字架。我已经尝试过这个问题“Create a cross shape in CSS”中的代码。但它让我疯狂，变成只有一条线。

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>

Answer 2

我个人会用一点coffeescrpit和css来使它更好。

<强> HTML

<span class="cross"></span>

<强> CSS3

@import "compass/css3";

body {background: #111;}

$cross-width: 15px;
$cross-thick: 1px;

.cross{
    transform: rotateZ(45deg);
}

.cross,
.cross:before,
.cross:after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: $cross_thick;
    height: $cross_width;
    background: #fafafa;
}

.cross:before,
.cross:after {
    content: '';
    display: inline-block;
    position: absolute;
    top: ($cross_width - $cross_thick)/ 2;
    left: -($cross_width - $cross_thick)/ 2;
    width: ($cross_width - $cross_thick)/ 2;
    height: $cross_thick;
}

.cross:after {
    left: $cross-thick;
}

Answer 3

从 Jim Bash 的解决方案中获取灵感，我将其修改为更一般，并允许自定义厚度。

<强> CSS ：

.cross {
    height: 30px;
    width: 30px;
    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: 10px;
    margin-top:-5px;    //half of heigth
}
.cross:before {
    left: 50%;
    top: 0;
    bottom: 0;
    width: 10px; 
    margin-left:-5px;    //half of width
}

关键是设置两个:before和:after伪类的宽度和高度，然后应用它们的负边距（在适当的方向上）等于其厚度的一半< / em>的

如果你使用像LESS这样的预处理器，可以优化它：

<强> LESS ：

@cross-size:30px; @cross-thickness:10px; @cross-color:red; .cross { height:@cross-size; width:@cross-size; 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:@cross-color; } .cross:after { top: 50%; left: 0; right: 0; height:@cross-thickness; margin-top:-(@cross-thickness/2); //half of heigth } .cross:before { left: 50%; top: 0; bottom: 0; width:@cross-thickness; margin-left:-(@cross-thickness/2); //half of width }

Answer 4

＆＃13;

.cross:after {
    content: "\271d"
}

＆＃13;

<span class="cross"></span>

＆＃13;

Voila你有交叉，如果你想要不同，那么检查UNICODE表

如何在CSS中创建交叉？

4 个答案: