使用 CSS 创建多边形形状。但是，polygon布局的内部内容不遵循多边形形状。它被形状剪裁隐藏。
需要将文本包裹在多边形中。
.flex {
display: flex;
justify-content: center;
height: 100%;
align-items: center;
}
.polygon1,
.polygon2 {
float: left;
width: 250px;
height: 250px;
background: #1e90ff;
-webkit-clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
text-align: center;
}
.polygon1 {
padding: 10px;
}
.polygon2 {
padding: 40px;
}<div class="polygon1">
<div class="flex">Lorem Ipsum is simply …