如何制作带折叠角的 45 度响应色带？答案

【问题标题】：How can I make a 45 degree responsive ribbon with folded corner?如何制作带折叠角的 45 度响应色带？
【发布时间】：2020-11-17 14:00:55
【问题描述】：

是否可以创建角形的 css 功能区？

我尝试过使用 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>

【问题讨论】：

相关stackoverflow.com/questions/30503866/…
@Paulie_D 谢谢！.. 是的，就是这个。但我需要边缘折叠格式...prnt.sc/tpqjx7

标签： html css css-shapes

【解决方案1】：

回复Create a CSS tag over a score card in div（标记为重复），但也可以在这里给其他人提示

您正在尝试同时评估旋转和平移以定位您的功能区，绝对坐标 + 旋转 + 变换原点可以使其更易于管理。

您还可以使用transform-origin 来决定它应该在哪里旋转并使其变大（溢出到足以使其在需要时也增长几行）并在区域可以设置一个填充被切断，overflow:hidden 可以用来隐藏两边。下面重新访问了你的 CSS 和一个包含几行的示例。

body {
  display: flex;
}

.project-card {
  margin: 1em;
  height: 350px;
  width: 300px;
  background-color: blue;
  position: relative;
  overflow: hidden;
}

.achievement-label {
  position: absolute;
  width: 300px;
  padding: 0.3rem 90px;
  box-sizing: border-box;
  background-color: red;
  transform: rotateZ(-45deg);
  top: 0;
  left: 0;
  transform-origin: 150px 150px;
  text-align: center;
}

<div class="project-card">
  <div class="achievement-label">Winner <br> Is The Big <br>Best.</div>
</div>

<div class="project-card">
  <div class="achievement-label">Winner</div>
</div>

对于clip-path，您还试图保持 45 度角，您可能决定在正方形上绘制该路径并将其切成两半以获得 45 度角。 同时让我们采取看看shape-outside，它有类似的语法，让内容围绕一个形状流动。

使用一些额外的标记，您可以使用float shape-outside（与clip-path 相同的语法）在填充区域的位置进行切断，以使文本在几行以下时跟随形状。

要在 45 度方向上剪辑，你需要从一个正方形开始，clip-path 的偏移坐标可以站在外面，这里每个尺寸的功能区的超大尺寸约为 90 像素，所以让我们使用 90 像素正方形 在其中绘制该路径。

用下面的额外标签重新访问之前的示例：

body {
  display: flex;
}

.project-card {
  margin: 1em;
  height: 350px;
  width: 300px;
  background-color: blue;
  position: relative;
}

.achievement-label {
  display: grid;/* (or flex) will make height:100% meaning full for the direct children of the grid cells element (<p><i>)*/
  position: absolute;
  width: 300px;
  padding: 0.3rem 0;
  box-sizing: border-box;
  background-color: red;
  transform: rotateZ(-45deg);
  top: 0;
  left: 0;
  transform-origin: 150px 150px;
  text-align: justify;
  text-align-last: justify;
  color: white;
  clip-path: polygon(90px 0, calc(100% - 90px) 0, 100% 90px, 0 90px);
}

p {
  margin: 0;
}

div.achievement-label i {
  float: left;
  height: 100%;
  width: 80px;
  shape-outside: polygon(0 0, 90px 0%, 0 90px, 0% 90px);/* NOTE works as long as height is not taller than 90px */
  background: tomato;
}

div.achievement-label i+i {
  float: right;
  shape-outside: polygon(0 0, 90px 0, 90px 90px, 90px 90px);
}

<div class="project-card">
  <div class="achievement-label">
    <p><i></i><i></i> Winner Is The Best <br>Is Really The Best <br> ... -/- ....</p>
  </div>
</div>

<div class="project-card">
  <div class="achievement-label">
    <p><i></i><i></i> Winner Is The Best </p>
  </div>
</div>

对于 -45deg，您最终可以使用 css var() 和 calc() 来设置您的功能区的宽度。

可能的例子

body {
  display: flex;
  flex-wrap:wrap;
}

.project-card {
  margin: 1em;
  height: 350px;
  width: 300px;
  background-color: blue;
  position: relative;
  overflow: hidden;
}

.achievement-label {
  text-align: center;
  position: absolute;  
  box-sizing: content-box;
  top: 0;
  left: 0;
  transform: rotate(-45deg);
/* init ribbon position for a -45deg rotation at top right corner */
  --width: 150px;
  --edgeOffset: calc( var(--width) / 2);
  --topOffset: calc( (var(--width) *.9));
  width: var(--width);
  transform-origin: 0 var(--edgeOffset);
  margin-top: var(--topOffset);
  padding: 0.3rem var(--edgeOffset);
  
  /* see padding areas */
  background: linear-gradient(to right, red var(--edgeOffset), tomato var(--edgeOffset), tomato calc(100% - var(--edgeOffset)), red calc(100% - var(--edgeOffset)));
}

.bis {
  width: 200px;
  height: 200px;
}

.ter {
  width: 350px;
  height: 100px;
}
.last {
  width:100%;
  height:80vh;
  min-width:200px;
  min-height:200px;
}

<div class="project-card">
  <div class="achievement-label">defaut set </div>
</div>

<div class="project-card bis">
  <div class="achievement-label" style="--width:125px;">125px</div>
</div>

<div class="project-card ter">
  <div class="achievement-label" style="--width:100px;">100px</div>
</div>

<div class="project-card last">
  <div class="achievement-label" style="--width:250px;">250px</div>
</div>

【讨论】：

谢谢这实际上是我一直在寻找的......此外，我正在使用网格来制作多张这些卡片，因为该网格项的高度和宽度将是动态的，我的问题是当您不知道父卡的宽度和高度时，您是how do you decide about transform-origin property。（本案例中的项目卡）
transform-origin 将主要取决于元素的宽度、它的填充旋转和盒子大小，以将填充包含在大小中。我将添加一个带有 CSS var() 的 sn-p 以使这些计算更容易并基于您设置的宽度。 @ShivamSahil

【解决方案2】：

尝试使用Linear Gradient。

要创建线性渐变，您必须至少定义两个色标。色标是您想要在其中呈现平滑过渡的颜色。您还可以设置起点和方向（或角度）以及渐变效果。

语法：
background-image: linear-gradient(direction, color-stop1, color-stop2, ...)
_{来源：W3Schools.com}

【讨论】：

其实我不需要渐变图像。我需要制作这个角落prnt.sc/tpqjx7
stackoverflow.com/questions/30503866/…
发现了一个类似的问题。希望这会有所帮助。

【解决方案3】：

您可以尝试如下：

.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>

【讨论】：