分类目录归档:CSS

CSS实现多边形文本区域自动换行,自动裁剪,沿着多边形来排版

先来看个正六边形的效果对应的HTML是
<div class="main"><div class="left"></div><div class="right"></div><p>这是一段文本。这是一段文本。这是一段文本。这是一段文本。这是一段文本。这是一段文本。这是一段文本。这是一段文本。这是一段文本。这是一段文本。这是一段文本。这是一段文本。</p></div>
对应的css是:
<style>.main {width: 13em;text-align: center;}.left, .right {width: 29.3%;height: 13em;background-color: lightgray;}.left3,.right3{width: 1px;}.left {-webkit-shape-outside: polygon(0 0, 0 100%, 100% 100%, 0 70.7%, 0 29.3%, 100% 0);shape-outside: polygon(0 0, 0 100%, 100% 100%, 0 70.7%, 0 29.3%, 100% 0);float: left;-webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 0 70.7%, 0 29.3%, 100% 0);clip-path: polygon(0 0, 0 100%, 100% 100%, 0 70.7%, 0 29.3%, 100% 0);}.right {-webkit-shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%, 100% 70.7%, 100% 29.3%);shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%, 100% 70.7%, 100% 29.3%);float: right;-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 100% 70.7%, 100% 29.3%);clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 100% 70.7%, 100% 29.3%);}p {text-align: center;}</style>
阅读全文