html - 如何在 CSS 中将文本包裹在多边形形状中?
问题描述
我对此一无所知,希望得到一些指导。如何让文本有效地包裹在绿色三角形的形状内?
.background-page {
display: grid;
grid-template-columns: 3fr 2fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
width: calc(100vh / 16 * 9);
/* usual ratio for phone screen*/
height: 100vh
}
.top-right {
grid-column: 1 / span 3;
grid-row: 1 / span 3;
width: 100%;
height: 100%;
background: #5FBEB1 linear-gradient(#5FBEB1, #afdfd8);
clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
}
.h1-header {
shape-outside: polygon(0% 0%, 100% 0%, 100% 100%);
z-index: 10;
font-family: Futura, Arial, sans-serif;
font-size: 2rem;
color: #266A6C;
}
.top-right-text {
width: 100%;
height: 100%;
shape-outside: polygon(0% 0%, 100% 0%, 100% 100%);
float: left;
}
.middle-left {
grid-column: 1 / span 1;
grid-row: 2 / span 3;
width: 100%;
height: 100%;
background: #AE2573 linear-gradient(to right, #d792b9, #AE2573);
clip-path: polygon(0% 0%, 0% 100%, 100% 50%);
}
.bottom-right {
grid-column: 1 / span 3;
grid-row: 3 / span 3;
width: 100%;
height: 100%;
background: #266A6C linear-gradient(#93b5b6, #266A6C);
clip-path: polygon(100% 0%, 0% 100%, 100% 100%);
}
.middle-right {
grid-column: 3 / span 1;
grid-row: 3 / span 1;
width: 100%;
height: 100%;
background: #AE2573 linear-gradient(to left, #d792b9, #AE2573);
clip-path: polygon(100% 0%, 0% 50%, 100% 100%);
}
<div class="background-page">
<div class="top-right">
<h1 class="h1-header">Good Morning!</h1>
<p class="top-right-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<div class="middle-left"></div>
<div class="bottom-right"></div>
<div class="middle-right"></div>
</div>
这是一个代码笔: https ://codepen.io/mbestuk/pen/YzxeBxb
我一直在尝试寻找 shape-outside 和 shape-inside 的示例,但无济于事。
我发现了这个,但它已经很老了,想知道是否有更新的答案?以多边形形状包裹的文本
解决方案
推荐阅读
- node.js - nodejs中图像的可扩展解析
- c# - Amazon 和 Evernote 的身份验证设置
- xcode10.2 - 升级 Xcode 到 10.2,构建失败
- arrays - 想要将数组的元素连接成单个元素
- angular - 我如何对使用 ngComponentOutlet 创建的角度组件进行单元测试?
- php - 如何在 Laravel 中自定义对象集合
- php - 24小时后在php中从数据库中删除行
- javascript - 如何清除从 JQuery.HTML() 检索到的 javascript 对象
- r - 寻找类似 SIMPROF 的聚类分析,但允许每个类别进行许多观察
- python - 如果它是其他行的子集,则熊猫会丢弃行