Css 沿浮动形状—面元素外路径将文字垂直居中""

发布于03月28日

我想使用形状来控制文本的流动.所以我添加了一个浮动div(.cutout)，其中定义了一个形状外部和clip路径.相邻div的内联内容行如预期的那样沿着这个路径中断(.innertext).

问题是，我希望文本沿着这条路径垂直居中.我try 过定位技巧和边缘技巧，但这些技巧 destruct 了沿着多边形路径的内联元素的流动.

有没有方法在cutout的父容器的高度内垂直对齐一组内联元素，同时保持innertext元素与shape-outside多边形路径的断行能力？

html,body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  height: 100%;
}

.cutout {
  float: right;
  background-color: #faa;
  width: 80%;
  height: 100%;
  shape-outside: polygon(0 100%, 100% 0%, 100% 100%);
  clip-path: polygon(0 100%, 100% 0%, 100% 100%);
}

.innertext {
  margin: auto;
}

<div class="container">
  <div class="cutout">
  </div>
  
  <div class="innertext">
    <h1>
      Lorem Ipsum
    </h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  
    </p>
  </div>
</div>

const container = document.querySelector('.container'); const innerText = document.querySelector('.innertext'); const containerStyle = getComputedStyle(container); const innerTextStyle = getComputedStyle(innerText); function reposition() { const height = Number(containerStyle.height.slice(0, -2)); let innerHeight = Number(innerTextStyle.height.slice(0, -2)); let paddingTop = 0; while (((paddingTop * 2) + innerHeight) < height) { paddingTop++; innerText.style.paddingTop = paddingTop + 'px'; innerHeight = Number(getComputedStyle(innerText).height.slice(0, -2)); } innerText.style.paddingTop = (paddingTop - 1) + 'px'; } window.onresize = reposition; reposition();

html, body { width: 100%; height: 100%; margin: 0; padding: 0; } .container { width: 100%; height: 100%; } .innerText :first-child { margin-top: 0; } .cutout { float: right; background-color: #faa; width: 80%; height: 100%; shape-outside: polygon(0 100%, 100% 0%, 100% 100%); clip-path: polygon(0 100%, 100% 0%, 100% 100%); }

<div class="container"> <div class="cutout"> </div> <div class="innertext"> <h1> Lorem Ipsum </h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> </div>

Css 沿浮动形状—面元素外路径将文字垂直居中""

推荐答案

Css相关问答推荐

如果父元素跨越所有网格列，子元素是否可以与网格一起工作？

如何使用css创建带有曲线的自定义按钮

悬停时可展开的按钮与屏幕右侧对齐，如何保持未悬停的按钮正确对齐？

MUI Textfield-悬停时输入标签 colored颜色

我无法在css中设置填充或边距

如何使用遮罩创建手绘SVG动画

CSS Select 标签旁边的文本并输入

TypeScript 中有效的 CSS 属性名称数组，但带有连字符

CSS 字符串变量的正确null值是多少？

父母是内联块，子元素有％填充=奇怪的行为

使用 JavaScript 将 CSS 添加到？

如何隐藏锚文本而不隐藏锚？

如何将 textarea 宽度扩展到父级宽度的 100%(或如何将任何 HTML 元素扩展到父级宽度的 100%)？

隐藏元素，但显示 CSS 生成的内容

悬停效果：展开底部边框

完成后如何防止css3动画重置？

了解 Bootstrap 3 中的网格类( col-sm-# 和 col-lg-# )

跨域 iframe 调整大小

堆叠半透明盒子的 colored颜色取决于订单？

背景图像可以大于 div 本身吗？