css布局实现一个三角形段落效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现一个三角形段落效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> p { font-size: 18px; font-weight: 200; line-height: 1.25; inline-size: 70ch; } triangle-paragraph > p { text-align: justify; -moz-text-align-last: justify; text-align-last: justify; } triangle-paragraph > .cutout:first-of-type { content: ''; inline-size: 50%; block-size: 100%; shape-outside: polygon(0 100vh, 0 0, 100% 0); float: left; } triangle-paragraph > .cutout:last-of-type { content: ''; inline-size: 50%; block-size: 100%; shape-outside: polygon(100% 100vh, 0 0, 100% 0); float: right; } triangle-paragraph { padding-top: 5vh; } * { box-sizing: border-box; margin: 0; } html { block-size: 100%; color-scheme: light dark; } body { min-block-size: 100%; font-family: system-ui, sans-serif; display: flex; place-content: center; } </style> </head> <body > <.........完整代码请登录后点击上方下载按钮下载查看
网友评论0