构建一个响应式CSS条带

Question

我正在构建一个将被其他人使用的组件。我需要建立一个丝带，需要响应和适应的内容丝带。

我知道如何使用固定大小的边框，如这个示例所示。

但是如果我改变丝带内的文字，我会得到类似于这的东西。

我可以使用哪种css技术来制作这个组件？

重要：我不能使用JS。只有CSS3和HTML。

Answer 1

下面是一个纯CSS解决方案，其中带状的宽度将与内容的宽度相适应：

​

.ribbon {
float:left;
clear: left;
display: inline-block;
position: relative;
height: 40px;
margin:12px 0;
padding: 0 4px;
color: rgb(255,255,255);
font-size: 10px;
font-family: verdana, sans-serif;
font-weight: bold;
background-color: rgb(255,0,0);
box-shadow: -2px 2px 2px rgb(0,0,0);
}

.ribbon::before {
content: '';
display: inline-block;
position: absolute;
top: 12px;
left: -24px;
z-index: -12;
width: 12px;
height: 16px;
border: 12px solid rgb(255,255,255);
border-top-color: rgba(0,0,0,0);
border-right-color: rgb(215,0,0);
}

.ribbon::after {
content: '';
display: inline-block;
position: absolute;
top: 6px;
right: -14px;
z-index: 12;
width: 28px;
height: 28px;
background-color: rgb(255,255,255);
transform: rotate(45deg);
box-shadow: inset 2px -1px 1px -1px rgb(0,0,0);
}

.ribbon span {
display: inline-block;
position: relative;
left: 6px;
width: 66%;
margin-top: 4px;
line-height: 16px;
}

<div class="ribbon">
<span>Ribbon Example</span>
</div>

<div class="ribbon">
<span>Ribbon Example with lots more text</span>
</div>

<div class="ribbon">
<span>Ribbon Example with a very large amount of text to show what happens when the ribbon contains an entire sentence</span>
</div>

​

Answer 2

在文本上玩line-height (或者添加它)。增加line-height px数量。

很高兴看到这件事发生在我能帮你的地方。