我正在学习 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;}
最佳答案
您好,我是这样解决这个难题的: 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),您可能仍然会看到结果并且可能需要稍微编辑一下大小。 希望这有帮助。:)
关于css - 右下角的圆形丝带,里面有图标和文字,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53245988/