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

效果图

css 在div左上角添加类似书签的标记_第1张图片

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;
	}

你可能感兴趣的:(STYLE,LIST,css,前端,html)