圆形容器内的文字布局效果
代码语言:html
所属分类:布局界面
代码描述:圆形容器内的文字布局效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Titillium+Web:400,400i,700&display=swap"); *, *:before, *:after { box-sizing: border-box; } body { font-family: "Titillium Web", sans-serif; font-size: 20px; line-height: 1.4; color: #161b1e; } .quote-wrapper { width: 300px; height: 300px; position: relative; margin: 10vh auto 0; /*OPTIONAL MARGIN*/ } .text { width: 100%; height: 100%; /*BLUE BG*/ background: radial-gradient( ellipse at center, rgba(0, 128, 172, 1) 0%, rgba(0, 128, 172, 1) 70%, rgba(0, 128, 172, 0) 70.3% ); /*RED BG background: radial-gradient( ellipse at center, rgba(210, 20, 20, 1) 0%, rgba(210, 20, 20, 1) 70%, rgba(210, 20, 20, 0) 70.3% );*/ position: relative; margin: 0; color: white; } .text p { height: 100%; font-size: 21px; line-height: 1.25; padding: 0; text-align: center; font-style: italic; text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3); } .text::before { content: ""; width: 50%; height: 100%; float: left; shape-outside: polygon( 0 0, 98% 0, 50% 6%, 23.4% 17.3%, 6% 32.6%, 0 50%, 6% 65.6%, 23.4% 82.7%, 50% 94%, 98% 100%, 0 100% ); shape-margin: 7%; } .text p::before { content: ""; width: 50%; height: 100%; float: right; shape-outside: polygon( 2% 0%, 100% 0%, 100% 100%, 2% 100%, 50% 94%, 76.6% 82.7%, 94% 65.6%, 100% 50%, 94% 32.6%, 76.6% 17.3%, 50% 6% ); shape-margin: 7%; } .quote-wrapper blockquote footer { width: 100%; posit.........完整代码请登录后点击上方下载按钮下载查看
网友评论0