(已解决-通过Codepen链接查看解决方案) 我正在尝试使用SVG图像作为背景,该图像将始终延伸到其父div的100%。 已经尝试过:
要更好地了解我的需求,请访问以下链接:
http://185.127.16.178/~amen/%D7%90%D7%95%D7%91%D7%97%D7%A0%D7%AA-%D7%9C%D7%90%D7%97%D7%A8%D7%95%D7%A0%D7%94/
在该绿色气泡中,文本的长度可以变化,因此当添加更多文本且div增大时,我需要SVG进行拉伸。
我还创建了一支小笔-
.svg-container {
height: 400px;
width: 200px;
border: 1px solid red;
position: relative;
}
#small_bubble {
top: 0;
right: 0;
width: 100%;
height: 100%;
}
.cls-1 {
fill: transparent;
stroke: green;
stroke-miterlimit: 3;
stroke-width: 3px;
}
.e-poa {
position: absolute;
}
e-por {
position: relative;
}
<div class="svg-container">
<svg id="small_bubble" class="e-poa" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 311.92 272.85" preserveAspectRatio="xMaxYMax">
<path class="cls-1" preserveAspectRatio="xMaxYMax" d="M301.52,1.57,8.37,19.53A7.87,7.87,0,0,0,1.5,27.34V214.76a7.89,7.89,0,0,0,7.12,7.85l46.67,4.53-7.14,42.78,63-37.35,190.58,18.51a7.88,7.88,0,0,0,8.65-7.85V9.38A7.88,7.88,0,0,0,301.52,1.57Z"/>
</svg>
</div>
解决方案可以在这里看到(由-@Furkan Poyraz解决): https://codepen.io/ncamaa/pen/JZzeQM
答案 0 :(得分:6)
如果您愿意接受其他选择,则可以使用纯CSS创建形状。它不会像SVG那样整洁,但会响应:
* {
box-sizing:border-box;
}
.box {
margin:40px;
padding:0 10px;
max-width:200px;
display:inline-block;
vertical-align:top;
border-right:2px solid green;
border-left:2px solid green;
position:relative;
}
.box:before {
content:"";
position:absolute;
left:-2px;
right:-2px;
bottom:calc(100% - 40px);
height:50px;
border:2px solid green;
border-bottom:0;
border-radius:5px 5px 0 0;
transform:skewY(-5deg);
transform-origin:left bottom;
}
.box .b {
position:absolute;
left:-2px;
right:-2px;
top:calc(100% - 40px);
height:50px;
border:2px solid green;
border-top:0;
border-radius:0 0 5px 5px;
transform:skewY(5deg);
transform-origin:left top;
}
.box .b:before {
content:"";
position:absolute;
width:30px;
height:30px;
top:calc(100% - 15px);
left:40px;
border-left:2px solid green;
border-bottom:2px solid green;
transform:skewY(-45deg);
}
.box .b:after {
content:"";
position:absolute;
width:27px;
height:4px;
top:calc(100% - 1px);
background:#fff;
left:42px;
}
.box p {
margin:0;
}
<div class="box">
<p>orem ipsum dolor sit amet, consectetur adipiscing elit. Duis est lorem, ultricies vel iaculis id, accumsan quis risus. In posuere arcu id metus tincidunt, in eleifend nisl dapibus. Ut viverra felis nec pretium accumsan. Sed eu ante id augue placerat pellentesque eget at nibh. Quisque pharetra nisi et suscipit eleifend</p>
<span class="b"></span>
</div>
<div class="box">
<p>orem ipsum dolor sit amet, consectetur adipiscing elit. Duis est lorem, ultricies vel iaculis id, accumsan quis risus. In posuere arcu id metus tincidunt, in eleifend nisl dapibus.</p>
<span class="b"></span>
</div>
<div class="box" style="max-width:300px;">
<p>orem ipsum dolor sit amet, consectetur adipiscing elit. Duis est lorem, ultricies vel iaculis id, accumsan quis risus. In posuere arcu id metus tincidunt, in eleifend nisl dapibus.</p>
<span class="b"></span>
</div>
<div class="box" style="max-width:350px;">
<p>orem ipsum dolor sit amet, consectetur adipiscing elit. Duis est lorem, ultricies vel iaculis id, accumsan quis risus.</p>
<span class="b"></span>
</div>