CSS 卡券 优惠卡效果样式 画三角形

.background {
	position: relative;
	height: 290rpx;
	width: 700rpx;
	border-radius: 10rpx;
	background: radial-gradient(circle at right bottom, transparent 10px, #cfa568 0) top right /50% 100px no-repeat,
		radial-gradient(circle at left bottom, transparent 10px, #cfa568 0) top left / 50% 100px no-repeat,
		radial-gradient(circle at right top, transparent 10px, #cfa568 0) bottom right / 50% 51px no-repeat,
		radial-gradient(circle at left top, transparent 10px, #cfa568 0) bottom left / 50% 51px no-repeat;
	filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));
}

正三角 倒三角

/* 正三角 */
.up-triangle {
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 0 25px 40px 25px;
   border-color: transparent transparent rgb(245, 129, 127) transparent;
 }
 
 /* 倒三角 */
 .down-triangle {
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 40px 25px 0 25px;
   border-color:  rgb(245, 129, 127) transparent transparent transparent;
 }
 div:last-child {
   margin-top: 1rem;
 }