程序员经验分享-hwhale

如何制作带折角的 45 度响应丝带？

2024-03-02

是否可以创建角形的 css 丝带？

(Please check the attached image ).

我尝试过使用 png 图像，但是是否有任何选项可以使用 css 创建？也应该与响应式视图一起使用。

.container {
  width: 200px;
  height: 200px;
  position: relative;
  margin: 20px;
  overflow: hidden;
}

.box {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.8; /* for demo purpose  */
}

.stack-top {
  height: 30px;
  z-index: 9;
  margin: 40px; /* for demo purpose  */
  transform: rotateY(0deg) rotate(45deg); /* needs Y at 0 deg to behave properly*/
  transition: transform 2s;
  color: #fff;
}
<div class="container">
  <div class="box" style="background: #fffff3;"></div>
  <div class="box stack-top" style="background: #242424;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 1Month</div>
</div>

您可以尝试如下所示：

.container {
  width: 200px;
  height: 150px;
  position: relative;
  display:inline-block;
  margin: 10px;
  background: lightblue;
}

.stack-top {
  /* adjust the below to control the shape */
  --d:5px; 
  --g:16px;
  --c:#333;
  /**/

  position: absolute;
  top: 0;
  right: 0;
  transform: translate(29.29%, -100%) rotate(45deg); /* 29.29% = 100%*(1 - cos(45deg)) */
  color: #fff;
  text-align: center;
  width: 100px;
  transform-origin: bottom left;
  padding:5px 0 calc(var(--d) + 5px);
  background:
    linear-gradient(135deg, transparent var(--g), var(--c) calc(var(--g) - 0.3px)) left,
    linear-gradient(-135deg,transparent var(--g), var(--c) calc(var(--g) - 0.3px)) right;
  background-size:51% 100%;
  background-repeat:no-repeat;
  clip-path:polygon(0 0,100% 0,100% 100%, calc(100% - var(--d)) calc(100% - var(--d)), var(--d) calc(100% - var(--d)),0 100%)
}
<div class="container">
  <div class="stack-top">1Month</div>
</div>

<div class="container">
  <div class="stack-top" style="--d:0px;--g:19px;width:120px;--c:blue">1Month</div>
</div>

<div class="container">
  <div class="stack-top" style="--d:8px;--g:17px;width:80px;--c:red">XX</div>
</div>

<div class="container">
  <div class="stack-top" style="--d:10px;--g:20px;width:200px;--c:green">1Month</div>
</div>

另一项调整是为折叠部分添加阴影效果：

.container {
  width: 200px;
  height: 150px;
  position: relative;
  display:inline-block;
  margin: 10px;
  background: lightblue;
}

.stack-top {
  /* adjust the below to control the shape */
  --d:5px; 
  --w:100px;
  --c:#333;
  /**/

  position: absolute;
  top: 0;
  right: 0;
  transform: translate(29.29%, -100%) rotate(45deg); /* 29.29% = 100%*(1 - cos(45deg)) */
  color: #fff;
  text-align: center;
  width: var(--w);
  transform-origin: bottom left;
  padding:5px 0 calc(var(--d) + 5px);
  background:
    linear-gradient(rgba(0,0,0,0.6) 0 0) bottom/100% var(--d) no-repeat
    var(--c);
  clip-path:polygon(0 100%,0 calc(100% - var(--d)),50% calc(100% - var(--d) - var(--w)/2),100% calc(100% - var(--d)),100% 100%,calc(100% - var(--d)) calc(100% - var(--d)), var(--d) calc(100% - var(--d)))
}
<div class="container">
  <div class="stack-top">1Month</div>
</div>

<div class="container">
  <div class="stack-top" style="--d:0px;--w:120px;--c:pink">1Month</div>
</div>

<div class="container">
  <div class="stack-top" style="--d:8px;--w:80px;--c:red">XX</div>
</div>

<div class="container">
  <div class="stack-top" style="--d:12px;--w:200px;--c:green">1Month</div>
</div>

您可以添加位置选项：

.container {
  width: 200px;
  height: 150px;
  position: relative;
  display:inline-block;
  margin: 10px;
  background: lightblue;
}

.stack-top {
  /* adjust the below to control the shape */
  --d:5px; 
  --w:100px;
  --c:#333;
  /**/

  position: absolute;
  top: 0;
  right: 0;
  transform: translate(29.29%, -100%) rotate(45deg); /* 29.29% = 100%*(1 - cos(45deg)) */
  color: #fff;
  text-align: center;
  width: var(--w);
  transform-origin: bottom left;
  padding:5px 0 calc(var(--d) + 5px);
  background:
    linear-gradient(rgba(0,0,0,0.6) 0 0) bottom/100% var(--d) no-repeat
    var(--c);
  clip-path:polygon(0 100%,0 calc(100% - var(--d)),50% calc(100% - var(--d) - var(--w)/2),100% calc(100% - var(--d)),100% 100%,calc(100% - var(--d)) calc(100% - var(--d)), var(--d) calc(100% - var(--d)))
}

.stack-top.left {
  left:0;
  right:auto;
  transform: translate(-29.29%, -100%) rotate(-45deg);
  transform-origin: bottom right;
}
<div class="container">
  <div class="stack-top">1Month</div>
</div>

<div class="container">
  <div class="stack-top" style="--d:0px;--w:120px;--c:pink">1Month</div>
</div>

<div class="container">
  <div class="stack-top left" style="--d:8px;--w:80px;--c:red">XX</div>
</div>

<div class="container">
  <div class="stack-top left" style="--d:12px;--w:200px;--c:green">1Month</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

cssshapes

如何制作带折角的 45 度响应丝带？ 的相关文章

随机推荐

  • Xcode 6.x/iOS 8 隐藏横向状态栏

    使用 Xcode 6 x 构建的应用程序会在横向 iPhone 中自动隐藏状态栏 使用 Xcode 5 x 编译的同一应用程序不会这样做 如何防止应用程序在横向模式下隐藏状态栏 基本上 我怎样才能禁用 Apple Xcode 强加给我的这个

  • WPF-验证错误事件不会触发

    我想我已经阅读了所有相关文章 但没有一篇有帮助 我正在尝试启用 禁用保存按钮datagrid通过错误状态 但没有成功 这是我的代码 承包商 AddHandler Validation ErrorEvent new RoutedEventHa

  • Pandas：如何将具有重复索引值的数据帧转换为字典

    我有一个数据框df test如下 a b c 5 7 1 6 7 0 15 17 1 16 17 0 Question 我正在尝试从此数据帧创建一个字典 其中 b 列作为索引 请注意列中的值b被重复 当我使用下面给出的代码创建字典时 它仅将

  • 如何更改 Flutter 桌面应用程序的应用程序图标和应用程序名称？

    我正在使用 Flutter 开发 Windows 桌面应用程序 但不知道如何更改应用程序的名称和图标 我想我已经找到了解决方案 以下应该适用于 Windows 应用程序 更改应用程序图标 只需将图标文件放在下面windows runner

  • 如何测量Qt中函数的运行时间？

    我正在打电话argon2 https en wikipedia org wiki Argon2 Qt 中的内存密集型哈希函数并测量其运行时间 QTime start QTime currentTime call hashing functi

  • IIS 7 日志请求正文

    我需要记录向 IIS 发出的请求的请求发布负载 是否可以使用 IIS 7 5 中的现有日志记录和高级日志记录模块来配置请求发布有效负载的日志记录 或者任何人都可以引导我使用允许我记录发布有效负载的任何自定义模块 实际上是可以做到的 根据ht

  • (C# 7.2)“private protected”修饰符的用例是什么？

    C 7 2 引入了 private protected 修饰符 https learn microsoft com en us dotnet csharp language reference keywords private protec

  • laravel 5.4 中 ResetPasswords.php 中未定义路由 [password.reset]

    我在我的自定义应用程序中收到此错误 InvalidArgumentException in UrlGenerator php line 304 Route password reset not defined 我知道 laravel 提供了

  • 鼠标光标位置改变

    您好 我有一个 Windows 窗体应用程序 我想移动鼠标 然后拖放将起作用 但我尝试使用 mousemove 鼠标事件来执行此操作 但似乎拖放非常敏感 所以我要问的是是否可以检测鼠标光标是否从当前光标移动至少一定距离 然后执行拖放代码 我

  • 如何在 C# 中恢复 SQL Server 2012 数据库 .bak 文件？

    我在 Windows 窗体中开发了一个 MIS 其中我备份了 SQL Server 2012 数据库 但我无法恢复备份 bak file 这是我的代码 private void buttonRestore Click object send

  • Mongodb 分片无法在分片之间分割大型集合

    我在 mongodb 中看似简单的分片设置时遇到了问题 我有两个分片 一个 mongos 实例和一个配置服务器 设置如下 机器 A 10 0 44 16 配置服务器 mongos机器 B 10 0 44 10 分片 1机器 C 10 0 4

  • 在 Linux 上捕获 CPU 使用情况的侵入性较小的方法

    工具怎么样Net SNMP http en wikipedia org wiki Net SNMP捕获CPU使用情况 在 Linux 下 侵入性最小的方法是什么 侵入性较小 这样做会消耗最少的机器资源 CPU 和 RAM 最终数据将被保存到

  • Angular：使用带有分隔符/分隔符的 ng-repeat 获取列表

    对 Angular 来说还很陌生 只是在寻找解决办法 我正在使用 ng repeat 输出按字母顺序排列的名称列表 我想在此列表中添加分隔线作为标签 Example A Author 1 Author 2 B Author 3 Author

  • Rails i18n：我可以关闭“翻译丢失”错误吗？

    我有一个多租户应用程序 我正在尝试使用 i18n gem 来允许我们的每个客户根据自己的喜好自定义系统 更改各个页面上的文本 自定义电子邮件等等 诚然 我并没有像预期那样使用 i18n 因为我实际上并没有翻译不同的 语言 一切都是英语 但每

  • Java：JPQL日期函数将一个时间段添加到另一个日期[关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 SELECT x FROM SomeClass WHERE x dateAtt BETWEEN CUR

  • SQL标准中真的有必要有GROUP BY吗

    编写 SQL 几年后 我发现必须放置我感兴趣的列常常很烦人SELECT然后在中再次指定它们GROUP BY 我不禁想 我们为什么要这么做 用户必须具体指定按哪一列进行分组的原因是什么 难道我们不能让 SQL 引擎假设如果有一个聚合函数SEL

  • 关于选择数据类型

    如果在表的某一列中我希望值为 是 否 或 可选 那么我需要使用什么数据类型 BIT 占用 1 个字节 但在 SQL Server 中最多可以将 8 个 BIT 字段合并为一个 BYTE 存储两个值之一 1 表示 true 和 0 表示 fa

  • 检查 AAR 元数据值时发现的一个或多个问题：

    嘿 我正在尝试运行我的应用程序 但收到此错误 构建 gradle plugins id com android application id kotlin android id kotlin kapt android compileSdk

  • 如何以编程方式增加 iPhone 中的 UITableView 单元格高度？

    我有单独的定制UITableViewCell用于显示数据 这些数据来自服务器 JSON 响应 在每个UITableViewCell我有 阅读更多 按钮 如果用户单击 阅读更多 按钮 我想以编程方式添加UILabel用于显示来自服务器的附加信

  • 如何制作带折角的 45 度响应丝带？

    是否可以创建角形的 css 丝带 我尝试过使用 png 图像 但是是否有任何选项可以使用 css 创建 也应该与响应式视图一起使用 container width 200px height 200px position relative m

热门标签