【CSS】用shape完美实现文字环绕 circle、ellipse、polygon

shape简介

shape有一下两个属性：
1.shape-outside：让文字从图片外部开始环绕，以及设置图片的形状
2.shape-inside：设置图片的内部形状，目前基本不支持

shape关键字如下（类似box-sizing）：

margin-box
content-box
border-box
padding-box

基本形状用以下函数来定义：

circle(size at x y);用于制作圆形size可以是%,px,rem,v*
ellipse(size);用于制作椭圆形
inset(top,right,bottom,left,round);…矩形前四个参数可缩写如padding格式
polygon(x1 y1,x2 y2,x3 y3…);..多边形
url();…从图像中提取形状，图像限于透明图片

下面用三角形文字环绕举例说明。

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .block{
            width: 20vw;
            height: 50vh;
            margin: 25vh auto;
        }
        .img{
            width: 200px;
            height: 200px;
            float: left;
            shape-outside: polygon(0 100%,50% 0,100% 100%);
            clip-path: polygon(0 100%,50% 0,100% 100%);
            background-color: pink;
        }
    </style>
<body>
<div class="block">
    <div class='img'>
        img
    </div>
    <div class="para">这是什么文字这是什么文字这是什么文字这是什么文字这是什么文字这是什么文字这是什么文字这是什么文字这是什么文字这是什么文字这是什么文字这是什么文字这是什么文字这是什么文字这是什么文字这是什么文字这是什么文字这是什么文字这是什么文字这是什么文字这是什么文字这是什么文字这是什么文字这是什么文字这是什么文字这是什么文字这是什么文字这是什么文字这是什么文字这是什么文字</div>
</div>

效果如图：
这里写图片描述

其中clip-path函数具有浏览器兼容问题。我这里用Chrome。

如果想绘制

圆形：
shape-outside:circle(50%);
或者
shape-outside:circle(50% at 0 0);/精准绘制/
椭圆形:
shape-outside:ellipse(60%);

这里需要注意，如果绘制的图形超出图片的大小，则对于超出部分，文字依照原图图形环绕
矩形（带20%圆角）
shape-outside:inset(22px round 20%);

从上图我们可以很清楚地看到一个圆角矩形…（不要脸…）
提取形状
shape-outside:url(img/1.png);
shape-image-threshold: 0.9;

shape-image-threshold: 0.9;：用于创建形状像素的最小不透明级别，值在0-1之间

注意：要使用shape，元素必须是浮动的。因为浮动是为文字环绕而生的。
还必须有宽高。

如有纰漏，还请各位看官不吝指出。
挚谢阅读。

【CSS】用shape完美实现文字环绕 circle、ellipse、polygon

shape简介

猜你喜欢