css 优惠券样式

秒速五厘米 2023-01-13 06:05 365阅读 0赞

![在这里插入图片描述][20210416135142272.png]

<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>

[20210416135142272.png]: /images/20221022/5464865f3d7444beae57d77cc974a27c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，365人围观）

还没有评论，来说两句吧...

相关阅读

相关 css3优惠券的样式集合

粘贴代码忘记在哪个博客看到的了，做个记录吧，各种css3优惠券的样式集合 <!DOCTYPE html> <html> <head>

川长思鸟来/ 2023年08月17日 17:02/ 0 赞/ 119 阅读

相关 css 优惠券样式

![在这里插入图片描述][20210416135142272.png] <template> <view class=""> <view cla

秒速五厘米/ 2023年01月13日 06:05/ 0 赞/ 366 阅读

相关 css绘制卡券优惠券_CSS 实现优惠券样式

本文将介绍如何使用 css 中的 radial-gradient 实现如下图所示的优惠券样式效果： ![Image 1][] 绘制基本样式首先，我们绘制出优惠券的基本样

爱被打了一巴掌/ 2023年01月09日 12:50/ 0 赞/ 646 阅读

相关前端优惠券样式实现

实现效果 ![实现效果][20210325111851394.png] 上代码，我是用uni-app写的大家可以自行参照修改界面代码 <view cl

男娘i/ 2022年11月13日 04:07/ 0 赞/ 214 阅读

相关 CSS样式

一、内部样式表 1、选择器： <html> <head> <title>内部样式表</title> <style type=

怼烎@/ 2022年06月12日 11:15/ 0 赞/ 337 阅读

相关优惠券样式收集

作者：[LoveEmperor\_王子様][LoveEmperor] <!DOCTYPE HTML> <html> <head>

朱雀/ 2022年06月11日 08:44/ 0 赞/ 211 阅读

相关 css样式

1.div下边框虚线 <html> <head> <style type="text/css"> dv{ border-bot

た入场券/ 2022年06月05日 05:25/ 0 赞/ 246 阅读

相关 CSS样式

1. font-size:20px; /\设置文字字号\/ 2. width:20px;

矫情吗；*/ 2022年05月24日 10:37/ 0 赞/ 290 阅读

相关 CSS3 优惠券

![在这里插入图片描述][20181206165626706.png] <!DOCTYPE html> <html> <head> <meta

超、凢脫俗/ 2022年04月11日 10:16/ 0 赞/ 402 阅读

相关 CSS样式

设置透明背景 background-color: transparent; div靠右或靠左显示 float:right float:left

以你之姓@/ 2021年09月25日 08:24/ 0 赞/ 462 阅读