我有这样的情况：https://jsfiddle.net/rozkvsdh/5/ https://jsfiddle.net/rozkvsdh/5/
CSS 网格，很简单，但在某些项目中，我需要放置一个功能区或另一个 div。
不可能！
我能怎么做？
grid-item {
background-color: lightgreen;
display: flex;
justify-content: center;
align-items: center;
}
.ribbon-wrapper {
width: 85px; // the length should be not in px I think!
height: 88px; // the length should be not in px I think!
overflow: hidden;
//position: absolute; it doesn't work!
position: relative;
top: -3px;
left: -3px;
.ribbon {
font: bold 15px sans-serif;
color: #333;
text-align: center;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
position: relative;
padding: 7px 0;
top: 15px;
left: -30px;
width: 120px;
background-color: #ebb134;
color: #fff;
}
}
你可以使用伪和数据属性 https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes :
HTML5 的设计考虑到了数据的可扩展性，这些数据应该与特定元素相关联，但不需要具有任何定义的含义。 data-* 属性允许我们存储关于标准语义 HTML 元素的额外信息，而无需其他 hack，例如非标准属性、DOM 上的额外属性
可以使用溢出并且背景剪辑 https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip可以帮助模仿丝带站在外面一点
CSS 属性 background-clip 指定元素的背景（颜色或图像）是否延伸到其边框下方。
vmin or vmax units https://www.w3.org/TR/css3-values/#viewport-relative-lengths可用于设置字体大小，通过填充和坐标上的 em 来调整功能区的大小。
视口百分比长度
是相对于初始包含块的大小。当初始包含块的高度或宽度更改时，它们会相应地缩放。
最终，shadow可以添加和linear-gradient可以帮助绘制倾斜阴影的部分。
Demo:
body {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
grid-auto-rows: 1fr;
grid-gap: 2px;
height: 100vh;
padding: 5px;
margin: 0;
box-sizing: border-box;
}
grid-item {
background-color: lightgreen;
background-clip: content-box;
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
padding: 3px;
}
grid-item[data-class="new"]:before {
content: attr(data-class);
position: absolute;
font-size: 2vmax; /* update font-size */
top: 0.4em;
left: -1.3em;
padding: 0em 1.5em;
transform: rotate(315deg);
background-color:gold;
/* eventually add some shadow effects */
background-image:
linear-gradient(135deg, black 0.9em, transparent 1.15em),
linear-gradient(-135deg, black 0.9em, transparent 1.15em);
box-shadow: 0 0 3px;
}
<grid-item>see</grid-item>
<grid-item>full</grid-item>
<grid-item>page</grid-item>
<grid-item>then</grid-item>
<grid-item data-class="new">RESIZE</grid-item>
<grid-item>window</grid-item>
<grid-item>to</grid-item>
<grid-item>see</grid-item>
<grid-item>ribbon</grid-item>
<grid-item data-class="new">font&size</grid-item>
<grid-item>updates</grid-item>
<grid-item>F</grid-item>
<grid-item data-class="new">PRO</grid-item>
<grid-item>B</grid-item>
<grid-item>C</grid-item>
<grid-item>D</grid-item>
<grid-item>E</grid-item>
<grid-item>F</grid-item>
<grid-item>A</grid-item>
<grid-item>B</grid-item>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
