首页 > 其他分享> > css实现不定长卡券

css实现不定长卡券

2021-11-09 12:58:57 作者：互联网

1.实现效果

在这里插入图片描述

2.实现代码

2.1重点代码：不设置宽度用padding撑开父元素

min-width: 67px;
display: inline-block;
padding: 0 10px;

2.2完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		body {
			background: #222;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100vh;
		}

		.content {
			min-width: 67px;
			display: inline-block;
			font-size: 12px;
			line-height: 23px;
			color: #FFFFFF;
			padding: 0 10px 0 10px;
			height: 23px;
			-webkit-mask: radial-gradient(circle at 5px, transparent 5px, red 0) -5px;
			background: linear-gradient(145deg, red, orange);
			border-radius: 4px;
			position: relative;
			margin-bottom: 40px;
		}

		.content::before {
			content: '';
			position: absolute;
			border: 1px dashed #fff;
			height: 23px;
			top: 0;
			left: 10px;
			transform: scaleX(0.5);
		}

		.content p {
			padding-left: 10px;
		}
		.col{
			display: flex;
			flex-direction: column;
			align-items: flex-start;
		}
	</style>
	<body>
		<section class="col">
			<div class="content">
				<p>苏苏1232342324334</p>
			</div>
			<div class="content">
				<p>苏苏</p>
			</div>
			<div class="content">
				<p>苏苏好好好好哈哈哈哈哈哈哈</p>
			</div>
			<div class="content">
				<p>dagedadagedadasdgdada </p>
			</div>
			<div class="content">
				<p>大大大大所大所大所大所大所大所大所大所大所大所大所大所大所大所</p>
			</div>
		</section>
	</body>
</html>

标签：padding,flex,长卡券,content,10px,height,所大所大,css,不定
来源： https://blog.csdn.net/qq_48085286/article/details/121225612