CSS实现多种图形

1、邮件虚线

.uni-grid-item-index {
	position: relative;
	overflow: hidden;
	border-top: 3rpx solid transparent;
	background: linear-gradient(white, white) padding-box,
		repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0/5em 5em;
	margin-bottom: 10rpx;
	flex: 0 0 32%;
}

2、右上角三角形

.uni-detail-right-content {
	width: 70%;
	background: #fff;
	border-radius: 5rpx;
	border: 1px solid #c4c6cb;
	margin: 10rpx 0 0 10rpx;
	font-size: 12rpx;
	position: relative;
	overflow: hidden;
}
.right-content-icon {
	background: red;
	color: white;
	width: 4.5rem;
	height: 4rem;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	line-height: 1.1;
	text-align: center;
	position: absolute;
	top: -30rpx;
	right: -35rpx;
	transform: rotate(45deg);
}