Question

是的，我遇到了一些问题而不确定这是否可以通过其他方式解决。

我需要移动content: "F";并将其置于我左上角的边框上。现在可以不创建另一个元素吗？

HTML：

<div class="userBoxF"></div>

CSS：

.userBoxF {
    width: 200px;
    height: 200px;
    background: #eee;
    border: 1px solid;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}
.userBoxF:after {
    content: "F";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border: 40px solid #F385FF;
    border-right-color: transparent;
    border-bottom-color: transparent;
    font-size: 30px;
}

我能想到的唯一方法就是将角落创建为一个完全独立的元素，这样我就可以把文字放在＆＃34; F＆＃34;进入span（或某事）并以此方式移动。

Demo Here

注意：此处的任何内容都不会改变框和角的大小，宽度和高度。

这就是我想要的，使用我找到的解决方案，但宁愿不使用。

HTML：

<div class="userBoxF">
    <div class="corner"><span>F</span></div>
</div>

CSS：

.userBoxF {
    width: 200px;
    height: 200px;
    background: #eee;
    border: 1px solid;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}
.userBoxF .corner {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border: 40px solid #F385FF;
    border-right-color: transparent;
    border-bottom-color: transparent;
    font-size: 30px;
}

.userBoxF .corner span {
    display: block;
    position: absolute;
    top: -30px;
    left: -20px;
}

这是我想出的解决方案的演示，但我宁愿不再创建元素。

My Solution

Answer 1

您可以同时使用:before智慧:after。

我删除了span：

<div class="userBoxF">
</div>

并将CSS块更改为：

.userBoxF:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border: 40px solid #F385FF;
    border-right-color: transparent;
    border-bottom-color: transparent;
    content: "";
}

.userBoxF:after {
    display: block;
    position: absolute;
    top: 10px;
    left: 14px;
    content: "F";
    font-size: 30px;
}

And here's the updated fiddle

编辑：这是一个额外的奖励！

你可以把'＆＃34; F＆＃34;如果你想要它更通用，如果你在attr内使用CSS content。例如：

<div class="userBox" data-l="F">
</div>

和

.userBox:after {
    display: block;
    position: absolute;
    top: 10px;
    left: 14px;
    content: "" attr(data-l);
    font-size: 30px;
}

And another fiddle

Answer 2

只需使用其他:psuedo：

Demo Fiddle

.userBoxF {
    width: 200px;
    height: 200px;
    background: #eee;
    border: 1px solid;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}
.userBoxF:before,.userBoxF:after{
    position: absolute;
    top: 0;
    left: 0;   
}
.userBoxF:before {
    content:"";
    border: 40px solid #F385FF;
    border-right-color: transparent;
    border-bottom-color: transparent;
}
.userBoxF:after {
    content:attr(data-l);
    top: 10px;
    left: 10px;
    font-size: 30px;
}

Answer 3

可以说＆＃34; F＆＃34;是实际内容，因为它不是样式选项......它实际上表示某些东西，也许应该由屏幕阅读器（例如）读取，然后带梯度的跨度（TL-BR）可能更合适。

JSFiddle Demo

<强> HTML

<div class="userBoxF">
    <span class="section-letter">F</span>
</div>

<强> CSS

.userBoxF {
    width: 200px;
    height: 200px;
    background: #eee;
    border: 1px solid;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}
.section-letter {
    position: absolute;
    top: 0;
    left: 0;
    width:2em;
    height:2em;
    line-height: 1em;
    text-align: left;
    padding:0.25em 0 0 0.25em;
    font-size: 30px;
    background: linear-gradient(135deg, pink 0%, pink 50%, transparent 50%, transparent 100%);

}

Answer 4

从单个伪，您可以使用渐变作为背景： DEMO

.userBoxF {
    width: 200px;
    height: 200px;
    background: #eee;
    border: 1px solid;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}
.userBoxF:after {
    content:"F";
    position: absolute;
    top: 0;
    left: 0;
    text-indent:20px;
    line-height:60px;
    width:80px;
    height:80px;
    background:linear-gradient(to bottom right, #F385FF 51%, transparent 49%);
    font-size: 30px;
}

背景图像作为渐变可以只是过去的图像：

demo image DEMO ：

将CSS内容移动到边框上

4 个答案:

编辑：这是一个额外的奖励！

Demo Fiddle