css 如何创建功能区？

ojsjcaue 于 2023-04-23 发布在其他

关注(0)|答案(2)|浏览(112)

我想在我目前的项目创建一个丝带，但因为我从来没有使用丝带之前，我甚至不知道如何开始...
Ribbon应该看起来像这样：

在最后一个较长的部分，我想添加一个图像内。其他部分（第一个浅红色和第二个暗红色的部分必须是空的）。我在网上看到了很多例子，但没有看起来像这样的。希望有人可以帮助我在这里...
HTML：

<div class=header-ribbon>
   ...
   ...
   <img...>
</div>

CSS：

?...

css

来源：https://stackoverflow.com/questions/76063079/how-do-i-create-a-ribbon

2条答案

按热度按时间

2uluyalo1#

clip-path with gradient可以做到这一点。
我使用了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>

赞(0）回复(0）举报 2023-04-23

6kkfgxo02#

如果需要3个单独的DOM元素，可以使用
transform()与perspective()和rotateY()：

transform-origin: left center;
transform: perspective(100px) rotateY(30deg);

我已经添加了一个placeholder image的最后一部分，要求在你的问题。

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

赞(0）回复(0）举报 2023-04-23

我来回答

css 如何创建功能区？

2条答案

相关问题

热门标签

最新问答