效果图

pPFthEF.md.png

html

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

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.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;
	}