CSS transform 如何设置斜杠徽标

My&Liu

于 2022-10-19 10:34:49 发布

阅读量278

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_46166771/article/details/127402990

版权

这篇博客探讨了如何使用CSS实现背景颜色为绿色的 `.onLine` 类元素，并通过绝对定位、旋转及文本颜色设置，创建了一个动态的旋转效果。内容涉及到CSS的样式属性如背景色、溢出、文字换行、定位以及transform旋转等，适用于前端开发中的动态效果实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<view class="onLine">
				<a href="#">2222</a>
</view>




.onLine {
		background-color: #4dc01d;
		overflow: hidden;
		white-space: nowrap;
		position: absolute;
		left: -45rpx;
		top: 25rpx;
		height: 35rpx;
		width: 150rpx;
		-webkit-transform: rotate(310deg);
		-moz-transform: rotate(310deg);
		-ms-transform: rotate(310deg);
		-o-transform: rotate(310deg);
		transform: rotate(310deg);
	}
	.onLine a {
		color: #ffffff;
		display: block;
		font-size: 12px;
		// padding: 20px 50px 8px 50px;
		text-align: center;
		text-decoration: none;
	}