我正在尝试创建一个消息框,旁边有一个小块。像这样:
我能够用纯色实现它(带有黑客,我稍后会解释)。如果消息框已应用透明度(alpha),则会出现hackish部分。然后看起来像这样:
正如您在第二张图片中看到的那样,额外的部分与实际消息重叠。如何“剪切”重叠的额外部分,重新设计额外部分而不重叠消息框?
body {
background-color: burlywood;
}
.about {
max-width: 300px;
padding: 15px;
text-align: right;
background-color: rgba(0, 0, 0, 0.4);
border-radius: 15px;
position: relative;
z-index: 0;
}
.about::before {
content: "";
box-sizing: initial;
border-color: rgba(0, 0, 0, 0.4);
border-radius: 50%;
border-style: solid;
border-width: 0 25px;
position: absolute;
height: 43px;
width: 53px;
bottom: -4px;
right: -78px;
clip: rect(18px, 37px, 42px, 0px);
z-index: -1;
}
<div class="about indent text-message-animation">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
修改
代替宝莱坞背景颜色会有图像。所以我不能只将颜色更改为border-color: #856e51;
答案 0 :(得分:0)
答案 1 :(得分:0)
不幸的是,你不能只用CSS做你所要求的。这就是为什么在使用圆形框时通常会看到边缘附着的“尾巴”而不是角落。
你需要一个图像或SVG来形成背景。如果您希望图像/ SVG是动态的,因为它会在不扭曲角落的情况下调整大小,您需要安排更复杂的HTML / CSS并提供单独的图像或与9-patch graphic类似的内容组合使用
(如果您对9补丁方法感兴趣,它们通常用于Android,但有Javascript libraries可以让它们更容易在网络上使用。)