html - 使用 CSS 创建一个带有十字和文本的 div

Question

我正在尝试创建一个带有“x”和其中文本的 div，如此图所示

我能以某种方式改进这个片段吗？

div {
   width:49px;
   height:49px; 
   border:1px solid black;
   position:relative;
   text-align:center;
   line-height:49px;
   font-size:25px;
}
div:before {
   content:'';
   position:absolute;
   width:0;
   height:0;   
   top:-1px;
   left:-1px;
   border:25px solid transparent;
   border-right:25px solid black;
   border-bottom:25px solid black;
   z-index:-3;
}
div:after {
   position:absolute;
   content:'';
   width:0;
   height:0;
   top:1px;
   left:1px;
   border:24px solid transparent;
   border-right:24px solid white;
   border-bottom:24px solid white;
   z-index:-2;
}

<div>XL</div>

上面的代码片段正是我到目前为止所做的，一个完全不同的解决方案(只要结果如所附图片所示)就可以了

Answer 1

如果你想确保文本始终在 div 中居中，你可以使用 absolute 定位并应用 background

查看此 fiddle

.wrapper {
   width:50px;
   height:50px; 
   border:2px solid black;
   position:relative;
   text-align:center;
   font-size:25px;
   padding: 10px;
   overflow: hidden;
}
.wrapper:before {
   content:'';
   position:absolute;
   top:50%;
   left: 50%;
   width:0;
   height:200%;   
   border: 1px solid black;
   transform: translateY(-50%)rotate(45deg);
   z-index: -3;
}
.wrapper:after {
   content:'';
   position:absolute;
   top:50%;
   left: 50%;
   width:0;
   height:200%;   
   border: 1px solid black;
   transform: translateY(-50%)rotate(-45deg);
   z-index: -3;
}
.wrapper > div {
   background: #fff;
   padding: 5px;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

<div class="wrapper">
  <div>
    XL
  </div>
</div>