CSS将文字环绕在几何图像上

用户名

是否可以将文本环绕在圣诞树上并使文本接触边缘?

我在左侧有一个文本块,在右侧有一个文本块,我想将树放在中间,并在左侧和右侧边缘缠绕文本,这可能吗?

HTML:

<div class="main-content">
    <div class="left-text">
        <p class="left">Sed pretium dapibus lorem. Morbi sed diam eu dolor fermentum pharetra. Aliquam quis erat maximus ligula tincidunt tincidunt vel sed dolor. Curabitur sed aliquet mi. Morbi quis ipsum non ante consectetur varius. Fusce dapibus posuere metus, nec interdum ante. Curabitur magna odio, interdum at est nec, vulputate faucibus quam. Aliquam est nisi, ultricies in mauris quis, venenatis tristique urna. Integer tristique, orci lobortis egestas feugiat, enim massa hendrerit turpis, quis dictum purus tortor ac augue.</p>  
        <p class="left">Sed pretium dapibus lorem. Morbi sed diam eu dolor fermentum pharetra. Aliquam quis erat maximus ligula tincidunt tincidunt vel sed dolor. Curabitur sed aliquet mi. Morbi quis ipsum non ante consectetur varius. Fusce dapibus posuere metus, nec interdum ante. Curabitur magna odio, interdum at est nec, vulputate faucibus quam. Aliquam est nisi, ultricies in mauris quis, venenatis tristique urna. Integer tristique, orci lobortis egestas feugiat, enim massa hendrerit turpis, quis dictum purus tortor ac augue.</p>
    </div>
    <div class="right-text">
        <p class="right">Sed pretium dapibus lorem. Morbi sed diam eu dolor fermentum pharetra. Aliquam quis erat maximus ligula tincidunt tincidunt vel sed dolor. Curabitur sed aliquet mi. Morbi quis ipsum non ante consectetur varius. Fusce dapibus posuere metus, nec interdum ante. Curabitur magna odio, interdum at est nec, vulputate faucibus quam. Aliquam est nisi, ultricies in mauris quis, venenatis tristique urna. Integer tristique, orci lobortis egestas feugiat, enim massa hendrerit turpis, quis dictum purus tortor ac augue.</p> 
        <p class="right">Sed pretium dapibus lorem. Morbi sed diam eu dolor fermentum pharetra. Aliquam quis erat maximus ligula tincidunt tincidunt vel sed dolor. Curabitur sed aliquet mi. Morbi quis ipsum non ante consectetur varius. Fusce dapibus posuere metus, nec interdum ante. Curabitur magna odio, interdum at est nec, vulputate faucibus quam. Aliquam est nisi, ultricies in mauris quis, venenatis tristique urna. Integer tristique, orci lobortis egestas feugiat, enim massa hendrerit turpis, quis dictum purus tortor ac augue.</p>
    </div>
    <div class="christmas-tree"><img src="http://www.raidersleafs.com/images/christmas-tree.png" /></div>
</div>

CSS:

.main-content {

}

.main-content .left-text {
        width:25%;
        float:left;
}

.main-content .left-text p.left {
}

.main-content .right-text {
        width:25%;
        float:right;
}

.main-content .right-text p.right {
}

.main-content .christmas-tree {
        text-align: center;
}

.main-content .christmas-tree img {
        width: 90%;
}

小提琴:

http://jsfiddle.net/63p19cbc/1/

更新

我能够使文本的左侧div沿着树的边缘...仍然无法获得右侧的效果:

    .main-content .christmas-tree img {
    width: 90%;
    shape-outside: polygon(50% 0, 100% 100%, 0% 100%, 0 100%) content-box;
    float: right;
    }



    <div class="main-content">
        <div class="christmas-tree"><img src="http://www.raidersleafs.com/images/christmas-tree.png" /></div>
<div class="left-text">
            <p class="left">Sed pretium dapibus lorem. Morbi sed diam eu dolor fermentum pharetra. Aliquam quis erat maximus ligula tincidunt tincidunt vel sed dolor. Curabitur sed aliquet mi. Morbi quis ipsum non ante consectetur varius. Fusce dapibus posuere metus, nec interdum ante. Curabitur magna odio, interdum at est nec, vulputate faucibus quam. Aliquam est nisi, ultricies in mauris quis, venenatis tristique urna. Integer tristique, orci lobortis egestas feugiat, enim massa hendrerit turpis, quis dictum purus tortor ac augue.</p>  
            <p class="left">Sed pretium dapibus lorem. Morbi sed diam eu dolor fermentum pharetra. Aliquam quis erat maximus ligula tincidunt tincidunt vel sed dolor. Curabitur sed aliquet mi. Morbi quis ipsum non ante consectetur varius. Fusce dapibus posuere metus, nec interdum ante. Curabitur magna odio, interdum at est nec, vulputate faucibus quam. Aliquam est nisi, ultricies in mauris quis, venenatis tristique urna. Integer tristique, orci lobortis egestas feugiat, enim massa hendrerit turpis, quis dictum purus tortor ac augue.</p>
        </div>
        <div class="right-text">
            <p class="right">Sed pretium dapibus lorem. Morbi sed diam eu dolor fermentum pharetra. Aliquam quis erat maximus ligula tincidunt tincidunt vel sed dolor. Curabitur sed aliquet mi. Morbi quis ipsum non ante consectetur varius. Fusce dapibus posuere metus, nec interdum ante. Curabitur magna odio, interdum at est nec, vulputate faucibus quam. Aliquam est nisi, ultricies in mauris quis, venenatis tristique urna. Integer tristique, orci lobortis egestas feugiat, enim massa hendrerit turpis, quis dictum purus tortor ac augue.</p> 
            <p class="right">Sed pretium dapibus lorem. Morbi sed diam eu dolor fermentum pharetra. Aliquam quis erat maximus ligula tincidunt tincidunt vel sed dolor. Curabitur sed aliquet mi. Morbi quis ipsum non ante consectetur varius. Fusce dapibus posuere metus, nec interdum ante. Curabitur magna odio, interdum at est nec, vulputate faucibus quam. Aliquam est nisi, ultricies in mauris quis, venenatis tristique urna. Integer tristique, orci lobortis egestas feugiat, enim massa hendrerit turpis, quis dictum purus tortor ac augue.</p>
        </div>

    </div>

http://jsfiddle.net/63p19cbc/2/

罗伯·蒙西缪斯

我相信这就是您在寻找^^:JSFiddle注意我在JSFiddle中更改了html。

的HTML

<div class="main-content">
            <div class="left">
                <p> In a one horse open sleigh.</p>
            </div>
            <div class="right"> 
                <p>Oh the weather outside is frightful</p>
            </div>
    <img class="christmas-tree" src="http://www.raidersleafs.com/images/christmas-tree.png" />
        </div><!--main-content-->

的CSS

.main-content {
    position: relative;
    width: 1000px;
    margin: auto;
}
/*align image to center (horizontal) and place it by absolute positioning (so the
  image is always appearing on the same spot) after placing it we will create an
  empty spot so the text will appear to flow around the image*/
img.christmas-tree  {
    position: absolute;
    left: calc(50% - 215px);
    width: 430px;
}
/*Just some text assigned to the right div*/
.right{
    width: 50%;
    float: right;
}
/*We will create empty space where the christmas tree is by adding blank content
 with ::before*/
.right::before{
    content: "";
    height: 550px;
    shape-outside: polygon(50px 0, 50px 150px, 215px 550px, 0 550px);/*this cuts out
        a part of the block so the text can freely move around. The values in here
        are coördinates in this blank content that allow text to float around it.*/
    width: 100%;
    float: left;    
}
.left{
    width: 50%;
    float: left;
    clear: left;
    text-align: right;
}
/*We will create empty space where the christmas tree is by adding blank content
  with ::before*/
.left::before{
    content: "";
    shape-outside: polygon(450px 0px, 450px 150px, 270px 550px, 500px 550px); /*this
                     cuts out a part of the block so the text can freely move around*/
    height: 550px;
    width: 100%;
    float: right;
}

最后几点注意事项:

  • 多边形有点难以解释,但是您基本上要添加一些点(点之间的想象线)以“切出”块或图像的某些部分。Chris Hollenbeck推荐的网站比我能更好地解释它。
  • 我的解决方案很大一部分依赖于了解圣诞树的确切坐标。要使其与灵活的大小树一起工作将更加困难。
  • 我希望许多浏览器不支持shape-outside:如果您知道浏览器的功能,请不要发表评论^^。

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

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

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

将文字环绕在引导图像上

来自分类Dev

将文字环绕在引导图像上

来自分类Dev

将文字环绕在圆形元素上

来自分类Dev

将文字环绕在圆形div上的问题

来自分类Dev

将元素环绕在跨度文本上

来自分类Dev

使图像浮动并带有环绕在图像周围的文字?

来自分类Dev

将元素环绕在固定的居中元素上

来自分类Dev

文字环绕在iFrame下方时如何将文字居中

来自分类Dev

将文字很好地环绕在水平Stackpanel或wrappanel中吗?

来自分类Dev

Bootstrap 3将文字环绕图像

来自分类Dev

如何使用Bootstrap将文字环绕图像?

来自分类Dev

如何使用CSS将内容环绕图像?

来自分类Dev

将链接环绕在JavaScript中的元素的更好方法

来自分类Dev

jQuery将标签环绕在纯文本周围

来自分类Dev

将div环绕在内部div中

来自分类Dev

Angular 如何将 class="row" 环绕在循环中

来自分类Dev

阻止文字环绕图像

来自分类Dev

文字不会环绕图像

来自分类Dev

HTML文字环绕图像

来自分类Dev

文字的图像视图环绕

来自分类Dev

使用React-Native将文字环绕图像

来自分类Dev

尝试在Bootstrap 4中将文字环绕图像

来自分类Dev

使用React-Native将文字环绕图像

来自分类Dev

文字不环绕浮动图像。但图像环绕浮动文本

来自分类Dev

将上下文html环绕在特定的树枝变量{{product.name}}上

来自分类Dev

CSS Flex,右对齐的第二列环绕在左侧,而不是在小窗口之间浮动

来自分类Dev

当单词环绕在空白处时,CSS超链接动画会失败

来自分类Dev

如何将文本环绕在堆叠的元素(即具有负边距的元素)周围?

来自分类Dev

将 div 环绕在 jQuery 中附加的 div 无法正常工作

Related 相关文章

热门标签

归档