这里有一个可能性,它的成功将取决于一些JS:
body {
background: gray;
}
.test {
background: white;
position: absolute;
top: 2em;
left: 10em;
width: 20em;
&:before {
content: "";
position: absolute;
top: 1em;
left: -4em;
border-width: 2em;
border-style: solid;
border-color: transparent;
border-right-color: white;
}
}
.test-inner {
position: relative;
margin-left: -1.5em;
}
.padder {
float: left;
clear: both;
&.m-1 {
width: 2em;
height: 1em;
}
&.m-2 {
width: 1.1em;
height: 1em;
}
&.m-3 {
width: 0.2em;
height: 1.6em;
}
&.m-4 {
width: 1.1em;
height: 1em;
}
&.m-5 {
width: 2em;
height: 3em;
}
}
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate blanditiis ex consectetur suscipit eos ipsa nulla obcaecati provident repellat minima vel reprehenderit dignissimos sed sapiente voluptas nesciunt quo non molestiae.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus pariatur veniam laboriosam sapiente aut aspernatur optio aperiam mollitia explicabo ut vero praesentium excepturi natus voluptatem atque adipisci porro voluptatum libero!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus pariatur veniam laboriosam sapiente aut aspernatur optio aperiam mollitia explicabo ut vero praesentium excepturi natus voluptatem atque adipisci porro voluptatum libero!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus pariatur veniam laboriosam sapiente aut aspernatur optio aperiam mollitia explicabo ut vero praesentium excepturi natus voluptatem atque adipisci porro voluptatum libero!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus pariatur veniam laboriosam sapiente aut aspernatur optio aperiam mollitia explicabo ut vero praesentium excepturi natus voluptatem atque adipisci porro voluptatum libero!
的原理是这样的:您可以添加浮动的div(或伪元素)不同的高度和宽度来伪造文本形状(假设文本是你想要扩展到三角形的东西)。
我制作的钢笔只是该原理的一个演示,并不适合您的具体情况。如果你打算使用这种形式化文本的方法,这听起来像你将不得不编写一些JS,它会以编程方式创建浮动div并根据箭头落在给定的气泡的位置来分配它们的宽度和高度。