Do Common Prefix or Suffix Triangles with Simple CSS (recorded)

It is found that this triangle is used as a prefix or suffix in many projects. It is recorded here and can be copied directly.

first look at the effect

 the code

HTML part

<view class="triangle">
						<view class="triangle-main"></view>
					</view>

 SCSS section

	.triangle {
					width: 18rpx;
					height: 18rpx;
					position: relative;
					overflow: hidden;
					margin-left: 12rpx;

					.triangle-main {
						position: absolute;
						width: 18rpx;
						height: 18rpx;
						background-color: rgba(62, 63, 65, 0.8314);
						-webkit-transform: rotate(45deg);
						transform: rotate(45deg);
						left: -54%;
					}
				}

You can also use pseudo-elements::before and::after, depending on your personal preference, the above can be copied directly without modification