我想在我当前的项目中创建一个 Ribbon,但由于我之前从未使用过 Ribbon,我什至不知道如何开始...
丝带应该是这样的:
在最后一个较长的部分,我想在里面添加一个图像。其他部分(第一个浅红色和第二个深红色部分必须是空的)。 我在网上看到了很多例子,但没有一个是这样的。希望有人能在这里帮助我...
HTML:
<div class=header-ribbon>
...
...
<img...>
</div>
CSS:
?...
带渐变的剪辑路径可以做到。
我使用了 CSS 变量,因此您可以轻松控制形状:
.ribbon {
--p1: 30%;
--p2: 60%;
--d: 20%;
width: 300px;
height: 100px;
background: linear-gradient(90deg, red var(--p1), darkred 0 var(--p2), red 0);
clip-path: polygon(0 0, var(--p1) 0,var(--p2) var(--d), 100% var(--d), 100% calc(100% - var(--d)), var(--p2) calc(100% - var(--d)), var(--p1) 100%, 0 100%)
}
<div class="ribbon"></div>
如果你想要 3 个单独的 DOM 元素,你可以使用获得所需的输出
transform()
与perspective()
和rotateY()
:
transform-origin: left center;
transform: perspective(100px) rotateY(30deg);
我已经按照您问题的要求在最后一部分添加了占位符图像。
html, body { height: 100vh; width: 100vw; }
.rib {
height: 50px;
width: 200px;
background: red;
float: left;
margin-left: 25px
}
.rir {
height: 34px;
width: 200px;
background: url('https://placehold.co/200x34/eb6a6a/black?text=IMG%20BAR');
margin-left: 282px;
margin-top: -42px;
}
.bak {
margin-left: 225px;
margin-top: 100px;
width: 100px;
height: 50px;
background: #913535;
perspective: 800px;
transform-origin: left center;
transform: perspective(100px) rotateY(30deg);
}
.text-center {
display: flex;
justify-content: center;
align-items: center;
}
<div class="container">
<div class="rib text-center">FOO</div>
<div class="bak"></div>
<div class="rir text-center"></div>
</div