html - 如何用css创建一个万宝路风格的表格

Question

我正在尝试创建一个看起来像 "marlboro package" 的表格通过使用线性渐变。类似于

background:
linear-gradient(-45deg, white,white 25%, red 25%, red), 
linear-gradient( 45deg, white,white 25%, red 25%, red);

我只是一个菜鸟，所以我真的不知道该怎么做。 有人能帮我吗？考虑到红色三 Angular 形不必到达我的表格的底部边界，但大约是它的 50%

Answer 1

您有基本的想法，但更好的渐变值似乎是 Angular 25deg 和白色部分 60%。

像这样

.box{
	box-sizing:border-box;
	background:
	linear-gradient(-25deg, transparent 0%, transparent 60%, #c60000 60%, #c60000 100%),
	linear-gradient(25deg, transparent 0%, transparent 60%, #c60000 60%, #c60000 100%);
	
	border:10px solid #ccc;
	width:500px;
	height:350px;
	
	font-size:5em;
	text-align:center;
	padding-top:220px;
}

<div class="box">Marlboro<div>