Create a div with a cross and a text inside with CSS - html

Question

I'm trying to create a div with an 'x' and a text inside it, as shown on this image
Can I somehow improve this snippet?
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>
The snippet above is just what I've done so far, a completely different solution(as long as the outcome is as shown on the image attached) is perfectly fine

Answer 1

If you want to make sure the text is always centered in the div, you could use absolute positioning and apply a background
See this 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>

Answer 2

Use linear-gradient()
I made two choices, inspired by the answers.
I used linear-gradient (), which is another way.
.first,
.second {
width: 49px;
height: 49px;
border: 1px solid black;
position: relative;
text-align: center;
margin: 0 auto 8px auto;
line-height: 49px;
font-size: 25px;
}
.first:before,
.second:before {
content: "";
position: absolute;
height: 142%;
top: 50%;
left: 50%;
transform: translateY(-50%) rotate(45deg);
z-index: -3;
background: linear-gradient(to top, #333, #333 25%, #eee0 25%, #eee0 75%, #333 75%);
padding: 0.5px;
}
.first:after,
.second:after {
content: "";
position: absolute;
height: 142%;
top: 50%;
left: 50%;
transform: translateY(-50%) rotate(-45deg);
z-index: -3;
background: linear-gradient(to top, #333, #333 25%, #eee0 25%, #eee0 75%, #333 75%);
padding: 0.5px;
}
.second {
width: 68px;
font-size: 20px;
}
.second:after {
height: 172%;
transform: translateY(-50%) rotate(-54deg);
}
.second:before {
height: 172%;
transform: translateY(-50%) rotate(54deg);
}
<div class="first">XL</div>
<div class="second">XL</div>

Answer 3

wrap your text on a span tag, add background
div {
width:49px;
height:49px;
border:1px solid black;
position:relative;
text-align:center;
line-height:49px;
font-size:25px;
}
div span{
background:#fff;
}
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><span>XL</span></div>