css 在div左上角添加类似书签的标记

最新推荐文章于 2023-03-09 11:24:39 发布

嗬呜阿花

最新推荐文章于 2023-03-09 11:24:39 发布

阅读量765

点赞数 1

分类专栏： STYLE LIST 文章标签： css 前端 html

本文链接：https://blog.csdn.net/weixin_44987713/article/details/127092329

版权

STYLE LIST 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

效果图

在这里插入图片描述

html

	<view class="mark corner-o" >
		半导体
	</view>

CSS

.mark {
		float: left;
		margin: 0 6rpx;
		position: relative;
		padding: 0;
		width: 24px;
		color: #fff;
		writing-mode: sideways-rl;
		text-align: center;
	}

	.mark::after {
		position: absolute;
		content: "";
		left: 0;
		top: 100%;
		border-style: solid;
		border-width: 0 12px 12px 12px;
	}
	
	.mark.corner-o {
		background: #ffaa00;
	}

	.mark.corner-o::after {
		border-color: #ffaa00 #ffaa00 transparent #ffaa00;
	}