如何让我的角落色带正确渲染？ [复制]答案

【问题标题】：How do I get my corner ribbon to render properly? [duplicate]如何让我的角落色带正确渲染？ [复制]
【发布时间】：2021-02-15 23:50:01
【问题描述】：

我正在尝试创建一个出现的角落功能区但到目前为止，我的：。我的功能区 CSS 是

.flag {
  background-color: red;
  overflow: hidden;
  white-space: nowrap;
  /* top left corner */
  position: relative;
  left: 0px;
  top: 0px;
  width:100%;
  height:100%;
  transform: rotate(-45deg);
  box-shadow: 0 0 10px #888;
}

我怎样才能让我的角落丝带看起来像我想要的那样？我有代码笔链接here

【问题讨论】：

如果您可以使用 jsfiddle / codepen 将其作为工作演示分享，那将会很有帮助
无论哪种方式，您都可以用另一个元素包装标志 div 并给出溢出：隐藏；风格
嗨@PrinjuKoshyVaidyan 我添加了一个codepen链接
更新答案..

标签： css

【解决方案1】：

风格

      .annual{
      overflow: hidden;
      }
     .annual  .flag{
        left: -36%;
        text-align: center;
        top: 26px;
      }

【讨论】：