问在功能区内定位文本的问题
EN

Stack Overflow用户

提问于 2021-03-08 05:30:30

回答 1查看 27关注 0票数 2

这是一个简单的功能区，我想放置在屏幕的左上角：

.ribbon {
  width: 200px;
  background: #e43;
  text-align: center;
  line-height: 50px;
  letter-spacing: 1px;
  color: #ffffff;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  font-family: "Open Sans Regular";
  font-size: 1.5em;
  top: -10px;
  left: -80px;
  height: 80px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  position: fixed;
  box-shadow: 0 3px 3px rgba(0,0,0,.3);
}

.ribbon.new {
  background: #9ddc03;
}

<div class="ribbon new">NEW</div>

正如您所看到的，绿色丝带上的New字并不是完全可见的，因为它位于矩形的上边缘。

如何将功能区的文本定位在矩形的下边缘，以便我们可以正确地看到它。

我在ribbon类上使用了下面的flex位置，但它会将文本推到右侧，而不是中心：

display: flex;
justify-content: flex-end;
align-items: flex-end;

html

css

回答 1

Stack Overflow用户

发布于 2021-03-08 05:49:26

您可以像下面这样更新代码：

.ribbon {
  background: #e43;
  color: #ffffff;
  font-size: 1.5em;
  position: fixed;
  top: 0;
  left: 0;
  transform: translateX(-50%) rotate(-45deg);
  transform-origin:top;
  padding:40px 100px 0; /* adjust the 40px to control the height (the 100px need to be a big value) */
  box-shadow: 0 3px 3px rgba(0,0,0,.3);
}

.ribbon.new {
  background: #9ddc03;
}

<div class="ribbon new">NEW</div>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66521645

复制

相似问题

问在功能区内定位文本的问题
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在功能区内定位文本的问题EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在功能区内定位文本的问题
EN