构建响应式CSS功能区

Question

我正在构建一个将被其他人使用的组件。我需要构建一个需要响应并适应功能区内容的功能区。

我知道如何使用固定大小的边框进行操作，如example所示。

但如果我更改了功能区内的文字，我会得到类似的内容 this

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

重要：我无法使用JS。只有CSS3和HTML。

Answer 1

这是一个纯CSS解决方案，其中功能区的宽度将适应内容的宽度：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

在文本上使用line-height（或添加它）。增加line-height px金额。

很高兴看到这方面的帮助，我可以帮助你。