试图将一个 background-size 属性设置为等于另一个

如何解决试图将一个 background-size 属性设置为等于另一个

我正在为一个文本元素设计样式，我想制作一个花哨的角落。我想出了这个代码作为解决方案。

.top-corner {
background:
linear-gradient(to left,black 6px,transparent 6px) 100% 0,linear-gradient(to bottom,transparent 6px) 100% 0;
background-repeat: no-repeat;
background-size: 40px 40px;
width: fit-content;
padding-right: 20px;

}

看起来不错，我对它没有任何问题。

https://fwb.crazychickentech.com/test/

当我开始更改字体大小时出现问题。我真正想做的是这样的事情。

background-size: "this in px" = that -> 50%; - 所以基本上，我希望第一个值（顶部）是每个第二个值（右侧）的值，但以像素为单位（不是百分比，因为那样它将是宽度的 50%。

---

我一直在尽可能多地阅读，但我就是一无所获（或无法理解）。

我确实看过一些 jQuery，但老实说，这不是我的强项。

我也想制作第二个 div 或其他东西，但此时我担心我可能会让事情变得比他们需要的更复杂，而且我没有清晰地思考。

任何建议或想法将不胜感激！

谢谢大家

快乐编码！

解决方法

伪元素可以做到这一点：

from django.db.models import Count

class PostDetailView(DetailView):
    model = Post
    queryset = Post.objects.annotate(
        num_views=Count('viewers')
    )

    def get_context_data(self,*args,**kwargs):
        if self.user.is_authenticated:
            __,created = Post.viewers.through.objects.get_or_create(
                post=self.object,user=self.request.user
            )
            if created:
                self.object.num_views += 1
        return super().get_context_data(*args,**kwargs)

h1 {
  position: relative;
  padding: 0 10px;
  display: table;
  margin: auto;
}

h1::before,h1::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 50%;
  width: 5px;
  background: red;
}

h1::after {
  transform-origin: top left;
  transform: translate(100%) rotate(90deg);
}