Question

我为我的网站上的图片制作了一个css横幅。我已经创建了基本的功能区，但它表现得很奇怪，我无法看清楚发生了什么。

HTML：

<body>
    <div> 
      <span class="top"></span> 
      <span class="bottom"></span>
      <span class="ribbon-text">TRENDING</span>
    </div>
</body>

的CSS：

.top {
position:absolute;
left:130px;
top:30px;
    width: 100px;
    height: 30px;
    background-color: orange;
    transform: rotate(45deg) skew(-45deg)
}

.bottom{
position:absolute;
left:160px;
top:60px;
    width: 100px;
    height: 30px;
    background-color: orange;
    transform: rotate(45deg) skew(45deg)
}

.ribbon-text{
position:absolute;
left:150px;
top:50px;
    transform: rotate(45deg);
text-transform:uppercase;
}

取决于功能区文本的大小，位置会发生偏移。例如＆＃34; TRENDING＆＃34;完美按照我的预期。但如果我把它改成＆＃34; SALE＆＃34;它不再处于正确的位置。

如果我添加更短或更长的东西，它会不断改变位置。你不知道为什么？

Answer 1

这是你在找什么？

通过给div一个类和ribbon-text一个宽度，然后我可以将其定位为适合顶部和底部的色带边缘到边缘，然后将文本居中对齐，使其现在使文本居中重要的是长度（只要它不长于宽度）

<强> JSFIDDLE

.ribbon-text{
    position:absolute;
    top:35px;
    left:130px;
    width:130px;
    transform: rotate(45deg);
    z-index:100;
}
.ribbon-block p{
    text-transform:uppercase;
    text-align:center;
}

Answer 2

你可以实现同样的事情，而不需要额外的div和额外的段。这是简化版：

.top {
position:absolute;
left:130px;
top:30px;
    width: 100px;
    height: 30px;
    background-color: orange;
    transform: rotate(45deg) skew(-45deg)
}

.bottom{
position:absolute;
left:160px;
top:60px;
    width: 100px;
    height: 30px;
    background-color: orange;
    transform: rotate(45deg) skew(45deg)
}

.ribbon-text{
    position:absolute;
    top:50px;
    left:130px;
    width:130px;
    transform: rotate(45deg);
    z-index:100;
    text-transform:uppercase;
    text-align:center;
}

干杯

位置根据文本的长度而移动

2 个答案: