角落css周围的文字，位置绝对和反应灵敏

Question

我想复制此结果：https://prnt.sc/j36zjg

我有这个代码，但是我有一些问题，文字并没有跟随广场，而是去了它想要的地方。

<div style="position:relative">
<p style="position: absolute; right: 20px; top: -235px; transform: 
rotate(90deg); color: #05c6bf; font-family: rubikregular; font-size: 
40pt;">CONTACTS</p>
</div>

谢谢

Answer 1

你必须处理top和right值，因为它们引用了90deg之前的元素。转动。

这是有效的代码：

<div style="position:relative;background:yellow;width:300px;height:300px;">
<p style="position: absolute; right: -70px; top: 100px; transform: 
rotate(90deg);background:#ccc; color: #05c6bf; font-family: rubikregular; font-size: 
20pt;padding:5px;">CONTACTS</p>
</div>

你可以在这个小提琴中查看它：

https://jsfiddle.net/4fkwqrL0/6/