将背景矩形对齐到中心和框后。
将背景矩形对齐到中心和框后。
提问于 2020-08-11 18:07:13
我想要创造这个：
到目前为止我已经很接近了：
@font-face {
font-family: "Heebo-Light";
src: url(Heebo-Light.ttf) format("truetype");
}
svg {
position: relative;
display: block;
overflow: visible;
pointer-events: none;
}
body {
background-color: #FDFDFD;
}
.box svg:nth-of-type(1) {
position: absolute;
z-index: 2;
left: 0;
top: 0;
}
.box svg:nth-of-type(2) {
position: absolute;
z-index: 1;
left: 0;
top: 0;
}
.subbox-container {
display: flex;
flex-direction: column;
gap: 5px;
}
.background-rectangle {
left: 0;
top: 0;
}
.box-container {
display: flex;
align-items: center;
justify-content: center;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="box-container">
<div class="subbox-container">
<!-- Start Box -->
<div id="box1" class ="box" style="margin: 0; z-index: 4; width: 257.829px; height: 42.6555px; opacity: 1; transform-origin: 128.914px 21.3277px; transform: translate(139px, 84px) rotate(0deg) scale(1, 1);" aria-label="do you ever">
<svg height="42.655499999999996" width="162" viewBox="0 0 172 45">
<text font-family="Heebo-Light" font-size="24px" fill="#595959" fill-opacity="1" x="50%" y="53%" dominant-baseline="middle" text-anchor="middle">
<tspan>do you ever</tspan>
</text>
</svg>
<svg height="42.655499999999996" width="162" viewBox="0 0 272 45" preserveAspectRatio="none">
<defs>
<linearGradient gradientTransform="rotate(90, 0.5, 0.5)" id="uniqueDomId-1114">
<stop offset="0%" stop-color="#AFAFAF" stop-opacity="1"></stop>
<stop offset="0%" stop-color="#F5F3F8" stop-opacity="1"></stop>
<stop offset="69.804%" stop-color="#F9F9F9" stop-opacity="1"></stop>
<stop offset="100%" stop-color="#FFFFFF" stop-opacity="1"></stop>
</linearGradient>
<filter id="uniqueDomId-1115" filterUnits="userSpaceOnUse" x="-15.75" y="-15.75" width="303.5" height="76.5">
<feFlood result="floodOut" flood-color="#CCC1DA" flood-opacity="0.29"></feFlood>
<feGaussianBlur result="gaussOut" in="SourceAlpha" stdDeviation="2.450000047683716,2.450000047683716">
</feGaussianBlur>
<feComposite in="floodOut" in2="gaussOut" operator="in"></feComposite>
</filter>
</defs>
<use transform="translate(-2.72, -0.45) scale(1.0199999809265137, 1.0199999809265137) translate(0, 0)" xlink:href="#uniqueDomId-1116" filter="url(#uniqueDomId-1115)" data-angle="0" data-distance="0" data-height="45" data-scale="1.02" data-adornment-type="drop-shadow" data-width="272" data-transform="[{"type":"translate","args":[-2.72,-0.45]},{"type":"scale","args":[1.0199999809265137,1.0199999809265137]}]"></use>
<g id="uniqueDomId-1116">
<g id="uniqueDomId-1117">
<path d="M0,0L272,0 272,45 0,45z" id="uniqueDomId-1118" fill="url(#uniqueDomId-1114)"></path>
</g>
</g>
</svg>
</div>
<!-- End Box -->
<!-- Start Box -->
<div id="box2" class ="box" style="margin: 0; z-index: 4; width: 257.829px; height: 42.6555px; opacity: 1; transform-origin: 128.914px 21.3277px; transform: translate(139px, 84px) rotate(0deg) scale(1, 1);" aria-label="do you ever">
<svg height="42.655499999999996" width="162" viewBox="0 0 172 45">
<text font-family="Heebo-Light" font-size="24px" fill="#595959" fill-opacity="1" x="50%" y="53%" dominant-baseline="middle" text-anchor="middle">
<tspan>do you ever</tspan>
</text>
</svg>
<svg height="42.655499999999996" width="162" viewBox="0 0 272 45" preserveAspectRatio="none">
<defs>
<linearGradient gradientTransform="rotate(90, 0.5, 0.5)" id="uniqueDomId-1114">
<stop offset="0%" stop-color="#AFAFAF" stop-opacity="1"></stop>
<stop offset="0%" stop-color="#F5F3F8" stop-opacity="1"></stop>
<stop offset="69.804%" stop-color="#F9F9F9" stop-opacity="1"></stop>
<stop offset="100%" stop-color="#FFFFFF" stop-opacity="1"></stop>
</linearGradient>
<filter id="uniqueDomId-1115" filterUnits="userSpaceOnUse" x="-15.75" y="-15.75" width="303.5" height="76.5">
<feFlood result="floodOut" flood-color="#CCC1DA" flood-opacity="0.29"></feFlood>
<feGaussianBlur result="gaussOut" in="SourceAlpha" stdDeviation="2.450000047683716,2.450000047683716">
</feGaussianBlur>
<feComposite in="floodOut" in2="gaussOut" operator="in"></feComposite>
</filter>
</defs>
<use transform="translate(-2.72, -0.45) scale(1.0199999809265137, 1.0199999809265137) translate(0, 0)" xlink:href="#uniqueDomId-1116" filter="url(#uniqueDomId-1115)" data-angle="0" data-distance="0" data-height="45" data-scale="1.02" data-adornment-type="drop-shadow" data-width="272" data-transform="[{"type":"translate","args":[-2.72,-0.45]},{"type":"scale","args":[1.0199999809265137,1.0199999809265137]}]"></use>
<g id="uniqueDomId-1116">
<g id="uniqueDomId-1117">
<path d="M0,0L272,0 272,45 0,45z" id="uniqueDomId-1118" fill="url(#uniqueDomId-1114)"></path>
</g>
</g>
</svg>
</div>
<!-- End Box -->
<!-- Start Box -->
<div id="box3" class ="box" style="margin: 0; z-index: 4; width: 257.829px; height: 42.6555px; opacity: 1; transform-origin: 128.914px 21.3277px; transform: translate(139px, 84px) rotate(0deg) scale(1, 1);" aria-label="do you ever">
<svg height="42.655499999999996" width="162" viewBox="0 0 172 45">
<text font-family="Heebo-Light" font-size="24px" fill="#595959" fill-opacity="1" x="50%" y="53%" dominant-baseline="middle" text-anchor="middle">
<tspan>do you ever</tspan>
</text>
</svg>
<svg height="42.655499999999996" width="162" viewBox="0 0 272 45" preserveAspectRatio="none">
<defs>
<linearGradient gradientTransform="rotate(90, 0.5, 0.5)" id="uniqueDomId-1114">
<stop offset="0%" stop-color="#AFAFAF" stop-opacity="1"></stop>
<stop offset="0%" stop-color="#F5F3F8" stop-opacity="1"></stop>
<stop offset="69.804%" stop-color="#F9F9F9" stop-opacity="1"></stop>
<stop offset="100%" stop-color="#FFFFFF" stop-opacity="1"></stop>
</linearGradient>
<filter id="uniqueDomId-1115" filterUnits="userSpaceOnUse" x="-15.75" y="-15.75" width="303.5" height="76.5">
<feFlood result="floodOut" flood-color="#CCC1DA" flood-opacity="0.29"></feFlood>
<feGaussianBlur result="gaussOut" in="SourceAlpha" stdDeviation="2.450000047683716,2.450000047683716">
</feGaussianBlur>
<feComposite in="floodOut" in2="gaussOut" operator="in"></feComposite>
</filter>
</defs>
<use transform="translate(-2.72, -0.45) scale(1.0199999809265137, 1.0199999809265137) translate(0, 0)" xlink:href="#uniqueDomId-1116" filter="url(#uniqueDomId-1115)" data-angle="0" data-distance="0" data-height="45" data-scale="1.02" data-adornment-type="drop-shadow" data-width="272" data-transform="[{"type":"translate","args":[-2.72,-0.45]},{"type":"scale","args":[1.0199999809265137,1.0199999809265137]}]"></use>
<g id="uniqueDomId-1116">
<g id="uniqueDomId-1117">
<path d="M0,0L272,0 272,45 0,45z" id="uniqueDomId-1118" fill="url(#uniqueDomId-1114)"></path>
</g>
</g>
</svg>
</div>
<!-- End Box -->
</div>
<!-- background rectangle -->
<div class="background-rectangle" style="height: 177.257px; width: 260.673px; transform: translate(-0.9479px, -0.9479px);">
<svg height="176.30939999999998" width="162" viewBox="-1 -1 274 186" data-commandset-id="35">
<g >
<path d="M259.147003,1E-06C266.245483,-1.2E-05 271.999939,5.754436 271.999969,12.852937 271.999969,12.85294 271.999969,12.852942 271.999969,12.852945L271.999969,12.852945L271.999969,171.147034C271.999969,178.245529 266.245514,183.999985 259.147034,183.999985L259.147034,183.999985L12.852946,183.999985C5.754463,183.999985 3E-06,178.245529 0,171.147049L0,171.147049L0,12.85295C-5E-06,5.754468 5.754446,7E-06 12.852927,-1E-06z" id="uniqueDomId-1466" fill="#E6E0EC" fill-opacity="0.07" stroke-width="1" stroke="#CCC1DA" stroke-opacity="0.14" stroke-linecap="flat" stroke-linejoin="round" data-stroke-sharpened="true" transform="translate(0.5, 0.5)"></path>
</g>
</svg>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
但我无法正确定位背景矩形..。我怎么能这么做？
多亏了@Rayees，我们现在更亲密了：
@font-face {
font-family: "Heebo-Light";
src: url(Heebo-Light.ttf) format("truetype");
}
svg {
position: relative;
display: block;
overflow: visible;
pointer-events: none;
}
body {
background-color: #FDFDFD;
}
.box svg:nth-of-type(1) {
position: absolute;
z-index: 2;
left: 0;
top: 0;
}
.box svg:nth-of-type(2) {
position: absolute;
z-index: 1;
left: 0;
top: 0;
}
.subbox-container {
display: flex;
flex-direction: column;
gap: 5px;
}
.background-rectangle {
left: 0;
top: 0;
}
.box-container {
position: absolute;
top: 300px
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="box-container">
<div class="subbox-container">
<!-- Start Box -->
<div id="box1" class ="box" style="margin: 0; z-index: 4; width: 257.829px; height: 42.6555px; opacity: 1; transform-origin: 128.914px 21.3277px; transform: translate(139px, 84px) rotate(0deg) scale(1, 1);" aria-label="do you ever">
<svg height="42.655499999999996" width="162" viewBox="0 0 172 45">
<text font-family="Heebo-Light" font-size="24px" fill="#595959" fill-opacity="1" x="50%" y="53%" dominant-baseline="middle" text-anchor="middle">
<tspan>do you ever</tspan>
</text>
</svg>
<svg height="42.655499999999996" width="162" viewBox="0 0 272 45" preserveAspectRatio="none">
<defs>
<linearGradient gradientTransform="rotate(90, 0.5, 0.5)" id="uniqueDomId-1114">
<stop offset="0%" stop-color="#AFAFAF" stop-opacity="1"></stop>
<stop offset="0%" stop-color="#F5F3F8" stop-opacity="1"></stop>
<stop offset="69.804%" stop-color="#F9F9F9" stop-opacity="1"></stop>
<stop offset="100%" stop-color="#FFFFFF" stop-opacity="1"></stop>
</linearGradient>
<filter id="uniqueDomId-1115" filterUnits="userSpaceOnUse" x="-15.75" y="-15.75" width="303.5" height="76.5">
<feFlood result="floodOut" flood-color="#CCC1DA" flood-opacity="0.29"></feFlood>
<feGaussianBlur result="gaussOut" in="SourceAlpha" stdDeviation="2.450000047683716,2.450000047683716">
</feGaussianBlur>
<feComposite in="floodOut" in2="gaussOut" operator="in"></feComposite>
</filter>
</defs>
<use transform="translate(-2.72, -0.45) scale(1.0199999809265137, 1.0199999809265137) translate(0, 0)" xlink:href="#uniqueDomId-1116" filter="url(#uniqueDomId-1115)" data-angle="0" data-distance="0" data-height="45" data-scale="1.02" data-adornment-type="drop-shadow" data-width="272" data-transform="[{"type":"translate","args":[-2.72,-0.45]},{"type":"scale","args":[1.0199999809265137,1.0199999809265137]}]"></use>
<g id="uniqueDomId-1116">
<g id="uniqueDomId-1117">
<path d="M0,0L272,0 272,45 0,45z" id="uniqueDomId-1118" fill="url(#uniqueDomId-1114)"></path>
</g>
</g>
</svg>
</div>
<!-- End Box -->
<!-- Start Box -->
<div id="box2" class ="box" style="margin: 0; z-index: 4; width: 257.829px; height: 42.6555px; opacity: 1; transform-origin: 128.914px 21.3277px; transform: translate(139px, 84px) rotate(0deg) scale(1, 1);" aria-label="do you ever">
<svg height="42.655499999999996" width="162" viewBox="0 0 172 45">
<text font-family="Heebo-Light" font-size="24px" fill="#595959" fill-opacity="1" x="50%" y="53%" dominant-baseline="middle" text-anchor="middle">
<tspan>do you ever</tspan>
</text>
</svg>
<svg height="42.655499999999996" width="162" viewBox="0 0 272 45" preserveAspectRatio="none">
<defs>
<linearGradient gradientTransform="rotate(90, 0.5, 0.5)" id="uniqueDomId-1114">
<stop offset="0%" stop-color="#AFAFAF" stop-opacity="1"></stop>
<stop offset="0%" stop-color="#F5F3F8" stop-opacity="1"></stop>
<stop offset="69.804%" stop-color="#F9F9F9" stop-opacity="1"></stop>
<stop offset="100%" stop-color="#FFFFFF" stop-opacity="1"></stop>
</linearGradient>
<filter id="uniqueDomId-1115" filterUnits="userSpaceOnUse" x="-15.75" y="-15.75" width="303.5" height="76.5">
<feFlood result="floodOut" flood-color="#CCC1DA" flood-opacity="0.29"></feFlood>
<feGaussianBlur result="gaussOut" in="SourceAlpha" stdDeviation="2.450000047683716,2.450000047683716">
</feGaussianBlur>
<feComposite in="floodOut" in2="gaussOut" operator="in"></feComposite>
</filter>
</defs>
<use transform="translate(-2.72, -0.45) scale(1.0199999809265137, 1.0199999809265137) translate(0, 0)" xlink:href="#uniqueDomId-1116" filter="url(#uniqueDomId-1115)" data-angle="0" data-distance="0" data-height="45" data-scale="1.02" data-adornment-type="drop-shadow" data-width="272" data-transform="[{"type":"translate","args":[-2.72,-0.45]},{"type":"scale","args":[1.0199999809265137,1.0199999809265137]}]"></use>
<g id="uniqueDomId-1116">
<g id="uniqueDomId-1117">
<path d="M0,0L272,0 272,45 0,45z" id="uniqueDomId-1118" fill="url(#uniqueDomId-1114)"></path>
</g>
</g>
</svg>
</div>
<!-- End Box -->
<!-- Start Box -->
<div id="box3" class ="box" style="margin: 0; z-index: 4; width: 257.829px; height: 42.6555px; opacity: 1; transform-origin: 128.914px 21.3277px; transform: translate(139px, 84px) rotate(0deg) scale(1, 1);" aria-label="do you ever">
<svg height="42.655499999999996" width="162" viewBox="0 0 172 45">
<text font-family="Heebo-Light" font-size="24px" fill="#595959" fill-opacity="1" x="50%" y="53%" dominant-baseline="middle" text-anchor="middle">
<tspan>do you ever</tspan>
</text>
</svg>
<svg height="42.655499999999996" width="162" viewBox="0 0 272 45" preserveAspectRatio="none">
<defs>
<linearGradient gradientTransform="rotate(90, 0.5, 0.5)" id="uniqueDomId-1114">
<stop offset="0%" stop-color="#AFAFAF" stop-opacity="1"></stop>
<stop offset="0%" stop-color="#F5F3F8" stop-opacity="1"></stop>
<stop offset="69.804%" stop-color="#F9F9F9" stop-opacity="1"></stop>
<stop offset="100%" stop-color="#FFFFFF" stop-opacity="1"></stop>
</linearGradient>
<filter id="uniqueDomId-1115" filterUnits="userSpaceOnUse" x="-15.75" y="-15.75" width="303.5" height="76.5">
<feFlood result="floodOut" flood-color="#CCC1DA" flood-opacity="0.29"></feFlood>
<feGaussianBlur result="gaussOut" in="SourceAlpha" stdDeviation="2.450000047683716,2.450000047683716">
</feGaussianBlur>
<feComposite in="floodOut" in2="gaussOut" operator="in"></feComposite>
</filter>
</defs>
<use transform="translate(-2.72, -0.45) scale(1.0199999809265137, 1.0199999809265137) translate(0, 0)" xlink:href="#uniqueDomId-1116" filter="url(#uniqueDomId-1115)" data-angle="0" data-distance="0" data-height="45" data-scale="1.02" data-adornment-type="drop-shadow" data-width="272" data-transform="[{"type":"translate","args":[-2.72,-0.45]},{"type":"scale","args":[1.0199999809265137,1.0199999809265137]}]"></use>
<g id="uniqueDomId-1116">
<g id="uniqueDomId-1117">
<path d="M0,0L272,0 272,45 0,45z" id="uniqueDomId-1118" fill="url(#uniqueDomId-1114)"></path>
</g>
</g>
</svg>
</div>
<!-- End Box -->
</div>
<!-- background rectangle -->
<div class="background-rectangle" style="height: 177.257px; width: 260.673px; z-index: 999999; transform: translate(139px, -252px);">
<svg height="276.30939999999998" width="162" viewBox="-1 -1 274 186" data-commandset-id="35">
<g >
<path d="M259.147003,1E-06C266.245483,-1.2E-05 271.999939,5.754436 271.999969,12.852937 271.999969,12.85294 271.999969,12.852942 271.999969,12.852945L271.999969,12.852945L271.999969,171.147034C271.999969,178.245529 266.245514,183.999985 259.147034,183.999985L259.147034,183.999985L12.852946,183.999985C5.754463,183.999985 3E-06,178.245529 0,171.147049L0,171.147049L0,12.85295C-5E-06,5.754468 5.754446,7E-06 12.852927,-1E-06z" id="uniqueDomId-1466" fill="#E6E0EC" fill-opacity="0.7" stroke-width="1" stroke="#CCC1DA" stroke-opacity="0.14" stroke-linecap="flat" stroke-linejoin="round" data-stroke-sharpened="true" transform="translate(0.5, 0.5)"></path>
</g>
</svg>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
但我仍然想不出一种方法，使背景矩形到正确的位置，，而不接触元素的宽度，！
回答 2
Stack Overflow用户
发布于 2020-08-11 18:23:05
您绝对不需要svgs来实现这一点，它们实际上是不必要的，而且将是一场噩梦。您应该使用普通的html和css来构建这些框。
你将需要改变高度，宽度，字体，家庭和颜色，尽管你需要。
.container {
display: flex;
align-items: center;
flex-direction: column;
}
.box {
font-family: 'Heebo-Light', serif;
font-size: 24px;
border-radius: 3px;
width: 200px;
flex: 0 0 3rem;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, rgba(227,227,227,1) 0%, rgba(255,255,255,1) 100%);
box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.1);
}
.box + .box {
margin-top: 2px;
}<div class="container">
<div class="box">test</div>
<div class="box">test</div>
<div class="box">test</div>
</div>
Stack Overflow用户
发布于 2020-08-11 18:24:25
，请试试这个
方法-1
你是translate的位置不对background-rectangle
@font-face {
font-family: "Heebo-Light";
src: url(Heebo-Light.ttf) format("truetype");
}
svg {
position: relative;
display: block;
overflow: visible;
pointer-events: none;
}
body {
background-color: #FDFDFD;
}
.box svg:nth-of-type(1) {
position: absolute;
z-index: 2;
left: 0;
top: 0;
}
.box svg:nth-of-type(2) {
position: absolute;
z-index: 1;
left: 0;
top: 0;
}
.subbox-container {
display: flex;
flex-direction: column;
gap: 5px;
}
.background-rectangle {
left: 0;
top: 0;
}
.box-container {
display: flex;
align-items: center;
justify-content: center;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="box-container">
<div class="subbox-container">
<!-- Start Box -->
<div id="box1" class ="box" style="margin: 0; z-index: 4; width: 257.829px; height: 42.6555px; opacity: 1; transform-origin: 128.914px 21.3277px; transform: translate(139px, 84px) rotate(0deg) scale(1, 1);" aria-label="do you ever">
<svg height="42.655499999999996" width="100%" viewBox="0 0 172 45">
<text font-family="Heebo-Light" font-size="24px" fill="#595959" fill-opacity="1" x="50%" y="53%" dominant-baseline="middle" text-anchor="middle">
<tspan>do you ever</tspan>
</text>
</svg>
<svg height="42.655499999999996" width="100%" viewBox="0 0 272 45" preserveAspectRatio="none">
<defs>
<linearGradient gradientTransform="rotate(90, 0.5, 0.5)" id="uniqueDomId-1114">
<stop offset="0%" stop-color="#AFAFAF" stop-opacity="1"></stop>
<stop offset="0%" stop-color="#F5F3F8" stop-opacity="1"></stop>
<stop offset="69.804%" stop-color="#F9F9F9" stop-opacity="1"></stop>
<stop offset="100%" stop-color="#FFFFFF" stop-opacity="1"></stop>
</linearGradient>
<filter id="uniqueDomId-1115" filterUnits="userSpaceOnUse" x="-15.75" y="-15.75" width="303.5" height="76.5">
<feFlood result="floodOut" flood-color="#CCC1DA" flood-opacity="0.29"></feFlood>
<feGaussianBlur result="gaussOut" in="SourceAlpha" stdDeviation="2.450000047683716,2.450000047683716">
</feGaussianBlur>
<feComposite in="floodOut" in2="gaussOut" operator="in"></feComposite>
</filter>
</defs>
<use transform="translate(-2.72, -0.45) scale(1.0199999809265137, 1.0199999809265137) translate(0, 0)" xlink:href="#uniqueDomId-1116" filter="url(#uniqueDomId-1115)" data-angle="0" data-distance="0" data-height="45" data-scale="1.02" data-adornment-type="drop-shadow" data-width="272" data-transform="[{"type":"translate","args":[-2.72,-0.45]},{"type":"scale","args":[1.0199999809265137,1.0199999809265137]}]"></use>
<g id="uniqueDomId-1116">
<g id="uniqueDomId-1117">
<path d="M0,0L272,0 272,45 0,45z" id="uniqueDomId-1118" fill="url(#uniqueDomId-1114)"></path>
</g>
</g>
</svg>
</div>
<!-- End Box -->
<!-- Start Box -->
<div id="box2" class ="box" style="margin: 0; z-index: 4; width: 257.829px; height: 42.6555px; opacity: 1; transform-origin: 128.914px 21.3277px; transform: translate(139px, 84px) rotate(0deg) scale(1, 1);" aria-label="do you ever">
<svg height="42.655499999999996" width="100%" viewBox="0 0 172 45">
<text font-family="Heebo-Light" font-size="24px" fill="#595959" fill-opacity="1" x="50%" y="53%" dominant-baseline="middle" text-anchor="middle">
<tspan>do you ever</tspan>
</text>
</svg>
<svg height="42.655499999999996" width="100%" viewBox="0 0 272 45" preserveAspectRatio="none">
<defs>
<linearGradient gradientTransform="rotate(90, 0.5, 0.5)" id="uniqueDomId-1114">
<stop offset="0%" stop-color="#AFAFAF" stop-opacity="1"></stop>
<stop offset="0%" stop-color="#F5F3F8" stop-opacity="1"></stop>
<stop offset="69.804%" stop-color="#F9F9F9" stop-opacity="1"></stop>
<stop offset="100%" stop-color="#FFFFFF" stop-opacity="1"></stop>
</linearGradient>
<filter id="uniqueDomId-1115" filterUnits="userSpaceOnUse" x="-15.75" y="-15.75" width="303.5" height="76.5">
<feFlood result="floodOut" flood-color="#CCC1DA" flood-opacity="0.29"></feFlood>
<feGaussianBlur result="gaussOut" in="SourceAlpha" stdDeviation="2.450000047683716,2.450000047683716">
</feGaussianBlur>
<feComposite in="floodOut" in2="gaussOut" operator="in"></feComposite>
</filter>
</defs>
<use transform="translate(-2.72, -0.45) scale(1.0199999809265137, 1.0199999809265137) translate(0, 0)" xlink:href="#uniqueDomId-1116" filter="url(#uniqueDomId-1115)" data-angle="0" data-distance="0" data-height="45" data-scale="1.02" data-adornment-type="drop-shadow" data-width="272" data-transform="[{"type":"translate","args":[-2.72,-0.45]},{"type":"scale","args":[1.0199999809265137,1.0199999809265137]}]"></use>
<g id="uniqueDomId-1116">
<g id="uniqueDomId-1117">
<path d="M0,0L272,0 272,45 0,45z" id="uniqueDomId-1118" fill="url(#uniqueDomId-1114)"></path>
</g>
</g>
</svg>
</div>
<!-- End Box -->
<!-- Start Box -->
<div id="box3" class ="box" style="margin: 0; z-index: 4; width: 257.829px; height: 42.6555px; opacity: 1; transform-origin: 128.914px 21.3277px; transform: translate(139px, 84px) rotate(0deg) scale(1, 1);" aria-label="do you ever">
<svg height="42.655499999999996" width="100%" viewBox="0 0 172 45">
<text font-family="Heebo-Light" font-size="24px" fill="#595959" fill-opacity="1" x="50%" y="53%" dominant-baseline="middle" text-anchor="middle">
<tspan>do you ever</tspan>
</text>
</svg>
<svg height="42.655499999999996" width="100%" viewBox="0 0 272 45" preserveAspectRatio="none">
<defs>
<linearGradient gradientTransform="rotate(90, 0.5, 0.5)" id="uniqueDomId-1114">
<stop offset="0%" stop-color="#AFAFAF" stop-opacity="1"></stop>
<stop offset="0%" stop-color="#F5F3F8" stop-opacity="1"></stop>
<stop offset="69.804%" stop-color="#F9F9F9" stop-opacity="1"></stop>
<stop offset="100%" stop-color="#FFFFFF" stop-opacity="1"></stop>
</linearGradient>
<filter id="uniqueDomId-1115" filterUnits="userSpaceOnUse" x="-15.75" y="-15.75" width="303.5" height="76.5">
<feFlood result="floodOut" flood-color="#CCC1DA" flood-opacity="0.29"></feFlood>
<feGaussianBlur result="gaussOut" in="SourceAlpha" stdDeviation="2.450000047683716,2.450000047683716">
</feGaussianBlur>
<feComposite in="floodOut" in2="gaussOut" operator="in"></feComposite>
</filter>
</defs>
<use transform="translate(-2.72, -0.45) scale(1.0199999809265137, 1.0199999809265137) translate(0, 0)" xlink:href="#uniqueDomId-1116" filter="url(#uniqueDomId-1115)" data-angle="0" data-distance="0" data-height="45" data-scale="1.02" data-adornment-type="drop-shadow" data-width="272" data-transform="[{"type":"translate","args":[-2.72,-0.45]},{"type":"scale","args":[1.0199999809265137,1.0199999809265137]}]"></use>
<g id="uniqueDomId-1116">
<g id="uniqueDomId-1117">
<path d="M0,0L272,0 272,45 0,45z" id="uniqueDomId-1118" fill="url(#uniqueDomId-1114)"></path>
</g>
</g>
</svg>
</div>
<!-- End Box -->
</div>
<!-- background rectangle -->
<div class="background-rectangle" style="height: 177.257px;width: 260.673px;transform: translate(-122.257px,84px);z-index: 999999;">
<svg height="176.30939999999998" width="100%" viewBox="-1 -1 274 186" data-commandset-id="35">
<g >
<path d="M259.147003,1E-06C266.245483,-1.2E-05 271.999939,5.754436 271.999969,12.852937 271.999969,12.85294 271.999969,12.852942 271.999969,12.852945L271.999969,12.852945L271.999969,171.147034C271.999969,178.245529 266.245514,183.999985 259.147034,183.999985L259.147034,183.999985L12.852946,183.999985C5.754463,183.999985 3E-06,178.245529 0,171.147049L0,171.147049L0,12.85295C-5E-06,5.754468 5.754446,7E-06 12.852927,-1E-06z" id="uniqueDomId-1466" fill="#E6E0EC" fill-opacity="0.07" stroke-width="1" stroke="#CCC1DA" stroke-opacity="0.14" stroke-linecap="flat" stroke-linejoin="round" data-stroke-sharpened="true" transform="translate(0.5, 0.5)"></path>
</g>
</svg>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
我改变了background-rectangle的风格
<div class="background-rectangle" style="height: 177.257px;width: 260.673px;transform: translate(-122.257px,84px);z-index: 999999;">
<svg height="176.30939999999998" width="100%" viewBox="-1 -1 274 186" data-commandset-id="35">
<g >
<path d="M259.147003,1E-06C266.245483,-1.2E-05 271.999939,5.754436 271.999969,12.852937 271.999969,12.85294 271.999969,12.852942 271.999969,12.852945L271.999969,12.852945L271.999969,171.147034C271.999969,178.245529 266.245514,183.999985 259.147034,183.999985L259.147034,183.999985L12.852946,183.999985C5.754463,183.999985 3E-06,178.245529 0,171.147049L0,171.147049L0,12.85295C-5E-06,5.754468 5.754446,7E-06 12.852927,-1E-06z" id="uniqueDomId-1466" fill="#E6E0EC" fill-opacity="0.07" stroke-width="1" stroke="#CCC1DA" stroke-opacity="0.14" stroke-linecap="flat" stroke-linejoin="round" data-stroke-sharpened="true" transform="translate(0.5, 0.5)"></path>
</g>
</svg>
</div>方法-2
@font-face {
font-family: "Heebo-Light";
src: url(Heebo-Light.ttf) format("truetype");
}
svg {
position: relative;
display: block;
overflow: visible;
pointer-events: none;
}
body {
background-color: #FDFDFD;
}
.box svg:nth-of-type(1) {
position: absolute;
z-index: 2;
left: 0;
top: 0;
}
.box svg:nth-of-type(2) {
position: absolute;
z-index: 1;
left: 0;
top: 0;
}
.subbox-container {
display: flex;
flex-direction: column;
gap: 5px;
}
.background-rectangle {
left: 0;
top: 0;
}
.box-container {
position: absolute;
top: 300px
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="box-container">
<div class="subbox-container">
<!-- Start Box -->
<div id="box1" class ="box" style="margin: 0; z-index: 4; width: 257.829px; height: 42.6555px; opacity: 1; transform-origin: 128.914px 21.3277px; transform: translate(139px, 84px) rotate(0deg) scale(1, 1);" aria-label="do you ever">
<svg height="42.655499999999996" width="162" viewBox="0 0 172 45">
<text font-family="Heebo-Light" font-size="24px" fill="#595959" fill-opacity="1" x="50%" y="53%" dominant-baseline="middle" text-anchor="middle">
<tspan>do you ever</tspan>
</text>
</svg>
<svg height="42.655499999999996" width="162" viewBox="0 0 272 45" preserveAspectRatio="none">
<defs>
<linearGradient gradientTransform="rotate(90, 0.5, 0.5)" id="uniqueDomId-1114">
<stop offset="0%" stop-color="#AFAFAF" stop-opacity="1"></stop>
<stop offset="0%" stop-color="#F5F3F8" stop-opacity="1"></stop>
<stop offset="69.804%" stop-color="#F9F9F9" stop-opacity="1"></stop>
<stop offset="100%" stop-color="#FFFFFF" stop-opacity="1"></stop>
</linearGradient>
<filter id="uniqueDomId-1115" filterUnits="userSpaceOnUse" x="-15.75" y="-15.75" width="303.5" height="76.5">
<feFlood result="floodOut" flood-color="#CCC1DA" flood-opacity="0.29"></feFlood>
<feGaussianBlur result="gaussOut" in="SourceAlpha" stdDeviation="2.450000047683716,2.450000047683716">
</feGaussianBlur>
<feComposite in="floodOut" in2="gaussOut" operator="in"></feComposite>
</filter>
</defs>
<use transform="translate(-2.72, -0.45) scale(1.0199999809265137, 1.0199999809265137) translate(0, 0)" xlink:href="#uniqueDomId-1116" filter="url(#uniqueDomId-1115)" data-angle="0" data-distance="0" data-height="45" data-scale="1.02" data-adornment-type="drop-shadow" data-width="272" data-transform="[{"type":"translate","args":[-2.72,-0.45]},{"type":"scale","args":[1.0199999809265137,1.0199999809265137]}]"></use>
<g id="uniqueDomId-1116">
<g id="uniqueDomId-1117">
<path d="M0,0L272,0 272,45 0,45z" id="uniqueDomId-1118" fill="url(#uniqueDomId-1114)"></path>
</g>
</g>
</svg>
</div>
<!-- End Box -->
<!-- Start Box -->
<div id="box2" class ="box" style="margin: 0; z-index: 4; width: 257.829px; height: 42.6555px; opacity: 1; transform-origin: 128.914px 21.3277px; transform: translate(139px, 84px) rotate(0deg) scale(1, 1);" aria-label="do you ever">
<svg height="42.655499999999996" width="162" viewBox="0 0 172 45">
<text font-family="Heebo-Light" font-size="24px" fill="#595959" fill-opacity="1" x="50%" y="53%" dominant-baseline="middle" text-anchor="middle">
<tspan>do you ever</tspan>
</text>
</svg>
<svg height="42.655499999999996" width="162" viewBox="0 0 272 45" preserveAspectRatio="none">
<defs>
<linearGradient gradientTransform="rotate(90, 0.5, 0.5)" id="uniqueDomId-1114">
<stop offset="0%" stop-color="#AFAFAF" stop-opacity="1"></stop>
<stop offset="0%" stop-color="#F5F3F8" stop-opacity="1"></stop>
<stop offset="69.804%" stop-color="#F9F9F9" stop-opacity="1"></stop>
<stop offset="100%" stop-color="#FFFFFF" stop-opacity="1"></stop>
</linearGradient>
<filter id="uniqueDomId-1115" filterUnits="userSpaceOnUse" x="-15.75" y="-15.75" width="303.5" height="76.5">
<feFlood result="floodOut" flood-color="#CCC1DA" flood-opacity="0.29"></feFlood>
<feGaussianBlur result="gaussOut" in="SourceAlpha" stdDeviation="2.450000047683716,2.450000047683716">
</feGaussianBlur>
<feComposite in="floodOut" in2="gaussOut" operator="in"></feComposite>
</filter>
</defs>
<use transform="translate(-2.72, -0.45) scale(1.0199999809265137, 1.0199999809265137) translate(0, 0)" xlink:href="#uniqueDomId-1116" filter="url(#uniqueDomId-1115)" data-angle="0" data-distance="0" data-height="45" data-scale="1.02" data-adornment-type="drop-shadow" data-width="272" data-transform="[{"type":"translate","args":[-2.72,-0.45]},{"type":"scale","args":[1.0199999809265137,1.0199999809265137]}]"></use>
<g id="uniqueDomId-1116">
<g id="uniqueDomId-1117">
<path d="M0,0L272,0 272,45 0,45z" id="uniqueDomId-1118" fill="url(#uniqueDomId-1114)"></path>
</g>
</g>
</svg>
</div>
<!-- End Box -->
<!-- Start Box -->
<div id="box3" class ="box" style="margin: 0; z-index: 4; width: 257.829px; height: 42.6555px; opacity: 1; transform-origin: 128.914px 21.3277px; transform: translate(139px, 84px) rotate(0deg) scale(1, 1);" aria-label="do you ever">
<svg height="42.655499999999996" width="162" viewBox="0 0 172 45">
<text font-family="Heebo-Light" font-size="24px" fill="#595959" fill-opacity="1" x="50%" y="53%" dominant-baseline="middle" text-anchor="middle">
<tspan>do you ever</tspan>
</text>
</svg>
<svg height="42.655499999999996" width="162" viewBox="0 0 272 45" preserveAspectRatio="none">
<defs>
<linearGradient gradientTransform="rotate(90, 0.5, 0.5)" id="uniqueDomId-1114">
<stop offset="0%" stop-color="#AFAFAF" stop-opacity="1"></stop>
<stop offset="0%" stop-color="#F5F3F8" stop-opacity="1"></stop>
<stop offset="69.804%" stop-color="#F9F9F9" stop-opacity="1"></stop>
<stop offset="100%" stop-color="#FFFFFF" stop-opacity="1"></stop>
</linearGradient>
<filter id="uniqueDomId-1115" filterUnits="userSpaceOnUse" x="-15.75" y="-15.75" width="303.5" height="76.5">
<feFlood result="floodOut" flood-color="#CCC1DA" flood-opacity="0.29"></feFlood>
<feGaussianBlur result="gaussOut" in="SourceAlpha" stdDeviation="2.450000047683716,2.450000047683716">
</feGaussianBlur>
<feComposite in="floodOut" in2="gaussOut" operator="in"></feComposite>
</filter>
</defs>
<use transform="translate(-2.72, -0.45) scale(1.0199999809265137, 1.0199999809265137) translate(0, 0)" xlink:href="#uniqueDomId-1116" filter="url(#uniqueDomId-1115)" data-angle="0" data-distance="0" data-height="45" data-scale="1.02" data-adornment-type="drop-shadow" data-width="272" data-transform="[{"type":"translate","args":[-2.72,-0.45]},{"type":"scale","args":[1.0199999809265137,1.0199999809265137]}]"></use>
<g id="uniqueDomId-1116">
<g id="uniqueDomId-1117">
<path d="M0,0L272,0 272,45 0,45z" id="uniqueDomId-1118" fill="url(#uniqueDomId-1114)"></path>
</g>
</g>
</svg>
</div>
<!-- End Box -->
</div>
<!-- background rectangle -->
<div class="background-rectangle" style="height: 230px; width: 162px; transform: translate(139px, -79px);">
<svg height="230" width="162" viewBox="-1 -1 274 186" data-commandset-id="35">
<g >
<path d="M259.147003,1E-06C266.245483,-1.2E-05 271.999939,5.754436 271.999969,12.852937 271.999969,12.85294 271.999969,12.852942 271.999969,12.852945L271.999969,12.852945L271.999969,171.147034C271.999969,178.245529 266.245514,183.999985 259.147034,183.999985L259.147034,183.999985L12.852946,183.999985C5.754463,183.999985 3E-06,178.245529 0,171.147049L0,171.147049L0,12.85295C-5E-06,5.754468 5.754446,7E-06 12.852927,-1E-06z" id="uniqueDomId-1466" fill="#E6E0EC" fill-opacity="0.7" stroke-width="1" stroke="#CCC1DA" stroke-opacity="0.14" stroke-linecap="flat" stroke-linejoin="round" data-stroke-sharpened="true" transform="translate(0.5, 0.5)"></path>
</g>
</svg>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63363988
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号