CSS Clouds-如何适应内部内容？

debugcn 发表于 Dev

所罗门·克洛森（Solomon Closson）

我在这里创建了一个小提琴，用以解释我要尝试做的事情：小提琴

基本上，我需要在云内部包含文本，并根据内部内容调整外部边界（使用框阴影效果）。认为只有CSS才有可能实现这一目标，但事实并非如此吗？

任何人都可以提供示例或开始这样做吗？

这是代码：

HTML：

<div class="container">
    <div class="cloud1"></div>
        <div class="cloud2"></div>
    <div class="cloud3"></div>
        <div class="cloud4"></div>
        <div class="cloud5"></div>
        <div class="cloud6"></div>
    <div class="cloud7"></div>
    <div class="cloud8"></div>
    <div class="inner">This is a CSS Cloud and is looking super cool, but need to figure out how to adjust the outside borders of the cloud so that they wrap around this text no matter how much text is in here.</div>
</div>

CSS：

.container {
    display: inline-block;
    position: relative;
    width: 250px;
    min-height: 250px;
    left: 100px;
    top: 10px;
    margin-bottom: -20px;
}
.cloud1 {
    position: absolute;
    left: 20px;
    top: 15px;
    height:45px;
     width:90px;
    background: whitesmoke;
     border-radius: 90px 90px 0 0;
     -moz-border-radius: 90px 90px 0 0;
     -webkit-border-radius: 90px 90px 0 0;
     box-shadow: inset 0px 0px 16px -4px white, 0px -1px 2px -2px black;
    border-bottom: none;
    z-index: 9;
}
.cloud2 {
    position: absolute;
    left: 80px;
    top: 15px;
    height: 45px;
    width:80px;
    background: whitesmoke;
    border-radius: 80px 80px 0 0;
     -moz-border-radius: 80px 80px 0 0;
     -webkit-border-radius: 80px 80px 0 0;
     box-shadow: inset 0px 2px 16px -4px white, 0px -1px 2px -1px black;
    z-index: 6;
}

.cloud3 {
     position: absolute;
    left: 140px;
    top: 45px;
     height:90px;
     width:45px;
     border-radius: 0 90px 90px 0;
     -moz-border-radius: 0 90px 90px 0;
     -webkit-border-radius:  0 90px 90px 0;
     background: whitesmoke;
     box-shadow: inset 0px 0px 16px -4px white, 2px 0 4px -3px black;
    z-index: 7;
}
.cloud4 {
     position: absolute;
    left: 140px;
    top: 120px;
     height:60px;
     width:30px;
     border-radius: 0 60px 60px 0;
     -moz-border-radius: 0 60px 60px 0;
     -webkit-border-radius:  0 60px 60px 0;
     background: whitesmoke;
     box-shadow: inset 0px 0px 16px -4px white, 1px 0 4px -2px black;
    z-index: 8;
}
.cloud5 {
    position: absolute;
    left:55px;
    top: 165px;
     height:45px;
     width:90px;
     border-radius: 0 0 90px 90px;
     -moz-border-radius: 0 0 90px 90px;
     -webkit-border-radius: 0 0 90px 90px;
     background: whitesmoke;
     box-shadow: inset 0px 2px 16px -4px white, 0px 1px 2px -2px black;
    z-index: 8;
}
.cloud6 {
    position: absolute;
    left:0px;
    top: 165px;
     height:30px;
     width:60px;
     border-radius: 0 0 60px 60px;
     -moz-border-radius: 0 0 60px 60px;
     -webkit-border-radius: 0 0 60px 60px;
     background: whitesmoke;
     box-shadow: inset 0px 2px 16px -4px white, 0px 2px 2px -2px black;
    z-index: 7;
}
.cloud7 {
    position: absolute;
    left: -30px;
    top: 80px;
    height:90px;
     width:45px;
     border-radius: 90px 0 0 90px;
     -moz-border-radius: 90px 0 0 90px;
     -webkit-border-radius: 90px 0 0 90px;
    box-shadow: inset 0px 0px 16px -4px white, -1px 0 4px -2px black;
     background: whitesmoke;
    z-index: 8;
}
.cloud8 {
    position: absolute;
    left: -15px;
    top: 35px;
    height:60px;
     width:45px;
     border-radius: 60px 0 0 60px;
     -moz-border-radius: 60px 0 0 60px;
     -webkit-border-radius: 60px 0 0 60px;
    box-shadow: inset 0px 0px 16px -4px white, -1px 0 4px -2px black;
     background: whitesmoke;
    z-index: 7;
}
.inner {
    position: absolute;
    width: 135px;
    height: 90px;
    left: 5px;
    top: 60px;
    background: whitesmoke;
    z-index: 10;
    padding: 10px;
}

因此，考虑是否将amin-height放在元素上而不是使用height它可以解决问题，但这不是:(

丹尼尔

首先删除所有绝对定位。（正如我在评论中提到的）

接下来，将whitesmoke背景放置在title元素而不是其父元素（具有填充）上，您将获得不错的结果。

.title {
    position: relative;
    text-align: center;
    background: whitesmoke; /* here */
}

您可以尝试在标题周围添加伪元素，以在文本的左上角和右下角区域周围添加圆圈。

.title:before {
    content: '';
    display:inline-block;
    width: 100%;
    height: 50%;
    position: absolute;
    left: -40px;
    z-index: -1;
    box-shadow: inset 0px 0px 16px -4px white, -1px 0 4px -2px black;
    border-radius: 100%;
    background: whitesmoke;
    top:0;
}
.title:after {
    content: '';
    display:inline-block;
    width: 100%;
    height: 50%;
    position: absolute;
    right: -40px;
    z-index: -1;
    box-shadow: inset 0px 0px 16px -4px white, 1px 0 4px -2px black;
    border-radius: 100%;
    background: whitesmoke;
    bottom:0;
}

更新了FIDDLE（我更新了您在评论中发布的小提琴）

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。