ボックスの左上に三角形の新着(NEW表示)を表示するCSS

.mark-box { width: 200px; height: 200px; position: relative; padding: 30px; background-color: #fef2f2;}.mark-box:before { position: absolute; content: ""; left: 0; top: 0; width: 0; height: 0; border-style: solid; border-width: 50px 50px 0 0; border-color: #f00 transparent transparent transparent;}.mark-box:after { position: absolute; content: "NEW"; transform: rotate(315deg); display: block; font-size: 11px; white-space: pre; color: #fff; top: 12px; left: 4px; text-align: center; z-index: 2; line-height: 1.2;}

Foundation Height Adjust

<div class="grid-x" data-equalize-on="medium" data-equalizer="foo"> <div class="medium-4 columns"> <div class="callout" data-equalizer-watch="foo" data-equalizer="bar" data-equalize-on-stack="true"> <h3>Parent panel</h3> <div class="callout" data-equalizer-watch="bar"> <p>The three callouts in this panel will equalize, even when stacked.</p> </div> <div class="callout" data-equalizer-watch="bar"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p> </div> <div class="callout" data-equalizer-watch="bar"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p> </div> </div> </div> <div class="medium-4 columns"> <div class="callout panel" data-equalizer-watch="foo"> <p>Where these panels will not equalize on stack, and instead equalize on medium up.</p> </div> </div> <div class="medium-4 columns"> <div class="callout" data-equalizer-watch="foo"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p> </div> </div></div>