如何在 CSS 中创建一个十字架？ [复制]答案

【问题标题】：How can I create a cross in CSS? [duplicate]如何在 CSS 中创建一个十字架？ [复制]
【发布时间】：2015-10-05 23:10:00
【问题描述】：

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

【问题讨论】：

使用 Unicode 字符。见en.wikipedia.org/wiki/X_mark。
人们需要停止这样做。 CSS 样式 HTML 元素。它不是绘图程序。

标签： css less

【解决方案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>

【讨论】：

请详细说明，为了未来的用户，这究竟是如何解决提问者问题的。欢迎堆栈溢出推荐阅读How to Answer

【解决方案2】：

我个人会使用一点咖啡脚本和 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;
}

【讨论】：

CoffeeScript 与此有何关系？
对不起，我写错了。

【解决方案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 伪类的宽度和高度，然后对它们应用一个负边距（在适当的方向上）等于它们厚度的一半。

如果您使用 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
}

【讨论】：

【解决方案4】：

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

&lt;span class="cross"&gt;&lt;/span&gt;

瞧，你有十字架，如果你想要不同，请检查 UNICODE 表

【讨论】：