Question

我想创建一个围绕容器的功能区。

我查看了以下教程：

https://css-tricks.com/snippets/css/corner-ribbon/

但是，我想在左侧创建一个功能区，而不是右侧。

你会认为这将是一个微不足道的变化，但我真的很挣扎！我尝试翻转旋转并从右向左改变方向，但最终看起来很奇怪！

以下是代码的JS小提琴（与URL非常相似，但代码较少）

https://jsfiddle.net/anik786/9rg5u1q4/4/

以下是HTML代码：

 <div class="corner-ribbon-main-wrapper"><div class="ribbon-wrapper"><div class="ribbon">SALE!</div></div></div>

CSS：

.corner-ribbon-main-wrapper {
  margin: 50px auto;
  width: 280px; 
  height: 370px; 
  background: white;
  border-radius: 10px; 
  box-shadow: 0 0 8px rgba(0,0,0,0.3);
  position: relative;
  z-index: 90;
}

.ribbon-wrapper {
  width: 85px;
  height: 88px;
  overflow: hidden;
  position: absolute;
  top: -3px;
  right: -3px;
}

.ribbon {
    font: bold 15px Sans-Serif;
    color: #333;
    text-align: center;
    text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
    position: relative;
    padding: 7px 0;

    transform: rotate(45deg);

    left: -5px;
    top: 15px;
    width: 120px;

    background-color: #BFDC7A;
    background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
    background-image: linear-gradient(top, #BFDC7A, #8EBF45);

    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

.ribbon:before, .ribbon:after {
    content: "";
    border-top: 3px solid #6e8900;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    position: absolute;
    bottom: -3px;
}

.ribbon:before {
    left: 0;
}

.ribbon:after {
    right: 0;
}

更新

删除SCSS并将其转换为纯CSS！

Answer 1

我修改了你的小提琴，这就是你需要的吗？ http://codepen.io/anon/pen/OyMJKR

.ribbon-wrapper {
  top: -3px; 
  left: -3px; /* Changed */
}

将CSS功能区放在另一侧

1 个答案: