4

我有这种情况：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;
  }
}
4

4 回答 4

3

您可以使用伪属性和数据属性：

HTML5 在设计时考虑了数据的可扩展性，这些数据应该与特定元素相关联，但不需要具有任何定义的含义。data-* 属性允许我们在标准、语义 HTML 元素上存储额外信息，而无需其他技巧，例如非标准属性、DOM 上的额外属性

可以使用溢出，背景剪辑可以帮助模仿站在外面的丝带

background-clip CSS 属性指定元素的背景（颜色或图像）是否延伸到其边框下方。

vmin或vmax单位可用于设置字体大小以通过填充和坐标上的 em 调整功能区的大小。

视口百分比长度与初始包含块的大小有关。当初始包含块的高度或宽度发生变化时，它们会相应地缩放。

最终，shadow可以添加并linear-gradient帮助绘制倾斜阴影的部分。

演示：

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>

于 2017-05-11T21:38:55.530 回答
2

你需要穿上position: relative;，grid-item然后你可以使用绝对位置.ribbon-wrapper。

grid-item {
  background-color: lightgreen;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.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;
  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://jsfiddle.net/thesouthstar86/rozkvsdh/6/

于 2017-05-11T20:33:35.490 回答
1

你可以做到这一点，也适用于调整大小，但它有点乱。

间隔 div 在那里，所以你有高度。你需要在每一侧都有一个，因为你希望 PRO 居中。我们在每一侧牺牲 1px 来完成这项工作，现在ribbon-wrapper可以是绝对的

https://jsfiddle.net/rozkvsdh/9/

HTML

<grid-item>

    <div class="ribbon-wrapper"><div class="ribbon">NEW</div></div>    
    <div class="spacer"></div>
    <div>PRO</div>
    <div class="spacer"></div>

</grid-item>

CSS

// this is new
.spacer {
  height: 88px;
  width: 1px;
}

grid-item {
  background-color: lightgreen;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative; // added
}
.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;
  top: 0; // edited
  left: 0; // edited
}
于 2017-05-11T20:45:36.410 回答
0

功能区不会左对齐，因为它是带有justify-content: center. 因此，功能区和内容都并排居中。

您可以使用 覆盖该设置margin-right: auto，这将使功能区左对齐，但它也会右对齐内容。

您可以插入一个不可见的间隔项以在容器中创建相等的平衡，使内容保持居中。但这有点牵涉，可能是不必要的。

坚持使用 CSS 定位属性。这将定位功能区。重新调整大小是另一回事：

grid-item {
    background-color: lightgreen;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* establish nearest positioned ancestor for abspos containment */
}

.ribbon-wrapper {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
}

.ribbon-wrapper .ribbon {
    font: bold 15px sans-serif;
    color: #333;
    text-align: center;
    transform: rotate(-45deg);
    position: relative;
    padding: 7px 0;
    top: 15px;
    left: -30px;
    width: 15vw;
    background-color: #ebb134;
    color: #fff;
}

修改后的小提琴

于 2017-05-11T20:44:12.353 回答