CSS形状 - 外部带有文本块

Question

我们看到文字边框是这样的一个圆圈：

但是我需要让文本块围绕一个圆圈对齐，类似于：

我尝试过不同的方法来阻止文本（内部跨度，负边距，显示块等）。但我没有运气。我不完全理解外形，但我感觉它在逐行的基础上强制形状，完全忽略了块。

我想避免绝对使用静态像素值来定位项目。我希望以编程方式解决此问题，而不是手动设置每个值。如果可能的话，我更喜欢使用CSS。

有什么好主意吗？

Answer 1

我猜你可以在不使用shape-outside但是有一些倾斜转换的情况下获得相似的输出，那么你可以调整度数，如果倾斜和/或一些余量。

body {
 max-width:580px;
}
.circle {
  height: 250px;
  width: 150px;
  border-radius: 50%;
  background: green;
  margin: 0 25px 5px 0;
  float: left;
}
.first {
  transform:skew(20deg);
  transform-origin: bottom left;
}
.first > p {
  transform:skew(-20deg);
}
.second {
  transform:skew(-20deg);
  transform-origin: top left;
}
.second > p {
  transform:skew(20deg);
}

<div class="circle"></div>
<div class="first">
  <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </p>
  <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem </p>
</div>
 <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem </p>
<div class="second">
  <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem </p>
  <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem </p>
</div>

Answer 2

我能够通过简单的解决方案生成结果。

.your-circle-shape-outside {  
  float: left;
  shape-outside: circle(50%);
  width: 200px;
  height: 200px;
}

.your-text-in-divs {
  display: flex;
  margin-bottom: 10px;
}

标记

<div class="your-circle-shape-outside"></div>

<div class="your-text-in-divs">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Omnis, vel corporis. In delectus repellat tempora nihil autem soluta enim eum assumenda. Totam quisquam excepturi laborum! Consequatur ab repellat est recusandae.</div>
<div class="your-text-in-divs">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Omnis, vel corporis. In delectus repellat tempora nihil autem soluta enim eum assumenda. Totam quisquam excepturi laborum! Consequatur ab repellat est recusandae.</div>
<div class="your-text-in-divs">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Omnis, vel corporis. In delectus repellat tempora nihil autem soluta enim eum assumenda. Totam quisquam excepturi laborum! Consequatur ab repellat est recusandae.</div>
<div class="your-text-in-divs">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Omnis, vel corporis. In delectus repellat tempora nihil autem soluta enim eum assumenda. Totam quisquam excepturi laborum! Consequatur ab repellat est recusandae.</div>
<div class="your-text-in-divs">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Omnis, vel corporis. In delectus repellat tempora nihil autem soluta enim eum assumenda. Totam quisquam excepturi laborum! Consequatur ab repellat est recusandae.</div>

向围绕圆圈的元素添加display flex会将文本垂直对齐到每个块的左侧。保证金底部可以适合

Answer 3

您可以使用定位和pre 元素来执行此操作，该元素定义预格式文本并保留两个空格和换行符。这样，您可以轻松地将内容放置在任何位置：

＆＃13;

＆＃13;

.circle {
  position: relative;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: green;
}

pre {
  position: absolute;
  top: 0;
  left: 75%;
  margin: 0;
  box-sizing: border-box;
}

＆＃13;

<div class="circle">
  <pre>
    test test
    test test

       test test
       test test

        test test
        test test

       test test
       test test

    test test
    test test
  </pre>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

另一种方法是模拟具有阶梯形状的圆形，如下例所示：

可以使用CSS的clip-path: polygon()属性创建此形状。现在文字将根据楼梯的形状浮动。

优点

• 多行始终与垂直线对齐，而不使用转换
• 不必逐个处理各种文本块
• 由于单个多边形点的百分比值，楼梯形状的大小很容易调整

限制

• 单个街区的行数不能改变，因为楼梯本身的大小必须在多边形本身中采用

工作示例

＆＃13;

＆＃13;

.curve {
  width: 250px;
  height: 250px;
  float: left;
  margin-right: -40px;
  background: darkgreen;
  border-radius: 50%;
}

.text-shape {
  height: 250px;
  width: 60px;
  float: left;
  background: rgba(0, 0, 0, 0); /* <- set the last value to != 0 to see the stairs shape */
  shape-outside: polygon(0 100%, 33% 100%, 33% 80%, 80% 80%, 80% 60%, 100% 60%, 100% 40%, 80% 40%, 80% 20%, 33% 20%, 33% 0, 0 0);
  clip-path: polygon(0 100%, 33% 100%, 33% 80%, 80% 80%, 80% 60%, 100% 60%, 100% 40%, 80% 40%, 80% 20%, 33% 20%, 33% 0, 0 0);
}

p {
  padding-top: 1px;
}

＆＃13;

<div class="curve"></div>
<div class="text-shape"></div>
<p>Lorem ipsum<br />dolor sit amet</p>
<p>Lorem ipsum<br />dolor sit amet</p>
<p>Lorem ipsum<br />dolor sit amet</p>
<p>Lorem ipsum<br />dolor sit amet</p>
<p>Lorem ipsum<br />dolor sit amet</p>

＆＃13;

＆＃13;

＆＃13;