css - 右下角的圆形丝带，里面有图标和文字

Question

我正在学习 css 并从事一个元素，我需要在网页的右下角显示一个圆形功能区以及其中的图标和文本。下面是我要实现的设计的屏幕截图。 .

到目前为止，我能够显示功能区，但无法保持图标和文本正常。这是 Codepen 的链接:https://codepen.io/stephen0roper/pen/JeKdJV

CSS 代码:

/* The ribbons */
.corner-ribbon{
  font-weight: bold;
  width: 50px;
  background: #e43;
  position: absolute;
  bottom: 5px;
  right: -30px;
  text-align: left;
  line-height: 100px;
  letter-spacing: 1px;
  color: #f0f0f0;
  transform: rotate(5deg);
  -webkit-transform: rotate(5deg);
  border-radius: 65px;
}

/* Custom styles */

.corner-ribbon.sticky{
  position: fixed;
}

.corner-ribbon.shadow{
  box-shadow: 0 0 3px rgba(0,0,0,.3);
}

/* Different positions */

.corner-ribbon.top-left{
  bottom: -50px;
  right: -100px;
  transform: rotate(-270deg);
  -webkit-transform: rotate(-315deg);
  background-color: red;
  width: 226px;
  height: 125px;
}


.corner-ribbon.red{background: #e43;}

Answer 1

您好，我是这样解决这个难题的:1 删除.corner-ribbon类

中的 line-height:100px;

2 将文字和图标包裹到一个div中，并添加一个类“stop-rotate”，只需要向后旋转45度即可:

   .stop-rotate{
  display:inline;
  padding-top:30px;
  float:left;
  transform: rotate(-45deg);
  text-align:center;
}

3 编辑html标签，将图标改为fa-2x

    <div class="corner-ribbon top-left sticky red shadow">
  <div class="stop-rotate">Some text
  <i class="fas fa-camera fa-2x" style="display:block"></i>   
  </div>
</div>

我已经保存了笔(对于那些可能需要的人:https://codepen.io/anon/pen/OaRpOd)，您可能仍然会看到结果并且可能需要稍微编辑一下大小。 希望这有帮助。:)