css 优惠券样式

最新推荐文章于 2024-06-12 14:22:32 发布

Lucky铂爵

最新推荐文章于 2024-06-12 14:22:32 发布

阅读量558

点赞数 1

本文链接：https://blog.youkuaiyun.com/weixin_44816309/article/details/115757663

版权

在这里插入图片描述

<template>
	<view class="">
		<view class="box1">
			优惠券
			<view class="leftsmall"></view>
			<view class="rightsmall"></view>
		</view>
	</view>
</template>
<style lang="less" scoped>
	.box1 {
		width: 160px;
		height: 100px;
		background: linear-gradient(to right, #FD6C3B, #D31B0D);
		position: relative;
		// overflow: hidden;
		margin-left: 50px;
		text-align: center;
		line-height: 100px;
		border: 3px solid orange;
		border-radius: 10px;

		.leftsmall {
			position: absolute;
			top: 40px;
			left: -3px;
			width: 10px;
			height: 20px;
			background-color: red;
			border-top-right-radius: 20px;
			border-bottom-right-radius: 20px;
			border: 3px solid orange;
			background-color: #FFFFFF;
			border-left: 0;
		}

		.rightsmall {
			position: absolute;
			top: 40px;
			right: -3px;
			width: 10px;
			height: 20px;
			background-color: red;
			border-top-left-radius: 20px;
			border-bottom-left-radius: 20px;
			border: 3px solid orange;
			background-color: #FFFFFF;
			border-right: 0;
		}
	}
</style>