svg+css实现响应式方框文字排版布局效果代码-html代码-BFW代码库

代码语言：html

代码描述：svg+css实现响应式方框文字排版布局效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
@import url(https://fonts.bunny.net/css?family=clicker-script:400|roboto:300,400,600,800);


.wrapper{
  --clr-primary: rgb(241, 245, 249);
  --clr-secondary: rgb(217, 119, 6);
  
  position: relative;
  align-self: center;  
  width: min(calc(100% - 4rem), 800px);
  padding: 1rem;
  border: 20px solid var(--clr-secondary);
}
svg{
  width: 100%;
  height: 100%;
  font-family: 'Roboto', sans-serif;
  color: var(--clr-primary);
}
/* listen to them */
svg > text:nth-child(1){
  font-weight: 400;
  font-size: 1rem;
  translate: 73px 23px;
}
/* the */
svg > text:nth-child(2){
  font-weight: 300;
  font-size: 0.8rem;
  translate: 12px 51px;
  rotate: -90deg;
  color: var(--clr-secondary);
}
/* children */
svg > text:nth-child(3){
  font-weight: 800;
  font-size: 2rem;
  translate: 14px 50px;
}
/* of the */
svg > text:nth-child(4){
  font-weight: 300;
  font-size: 0.8rem;
  translate: 67px 63px;
}
/* night */
svg > text:nth-child(5){
  font-weight: 800;
  font-size: 1.8rem;
  translate: 100px 74px;
  color: var(--clr-secondary);
}
/* what */
svg > text:nth-child(6){
  font-weight: 300;
  font-size: 0.8rem;
  translate: 45px 76px;
}
/* music */
svg > text:nth-child(7){
  font-weight: 400;
  font-size: 1.64rem;
  translate: 45px 97px;
/*  font-style: italic;*/
}
/* they make */
svg > text:nth-child(8){
  font-weight: 300;
  font-size: 0.8rem;
  translate: 126px 86px;
}
/* Dracula by Bram Stoker */
svg > text:nth-child(9){
  font-weight: 300;
  font-size: 0.2rem;
  translate: 158px 92px;
  color: var(--clr-secondary);
}
.wrapper > img{
  position: absolute;
  left: -28px;
  bottom: -29.5%;
  width: 50%;
  z-index: 1;
/*  opacity: .6;*/
  clip-path: polygon(28px 0, 100% 0%, 100% 100%, 40% 100%, 40% 50.4%, 28px 50.4%);
}


/* general styling not relevant for this demo */
*,
::before,
::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
  --clr-bg: #222;
  --clr-primary: #f5f5f5;
  --clr-secondary: #075985; 
}

html {
  background-color: var(--clr-bg);
  font-family: system-ui;
}

body {
  min-height: 100svh;
  display: flex;
  place-content: center;
  color: var(--clr-primary);
  padding: 1rem;
}

body::after {
  content: "";
  position: fixed;
  top: 1rem;
  left: 1rem;
  width: 32px;
  height: 32px;
  background-size: cover;
  background-image: url('data:image/svg+xml,<svg id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" version="1.1"><g id="surface1"><path fill="rgb(175, 208, 84)" d="M 47.894531 0.789062 C 46.320312 0.878906 45.480469 0.949219 44.601562 1.042969 C 37.023438 1.863281 29.746094 4.394531 23.386719 8.414062 C 20.214844 10.421875 17.402344 12.65625 14.757812 15.285156 C 7.773438 22.222656 3.027344 30.992188 1.113281 40.5 C -0.460938 48.332031 -0.132812 56.378906 2.070312 64.003906 C 4.0625 70.890625 7.507812 77.195312 12.277344 82.675781 C 16.65625 87.714844 22.109375 91.898438 28.074219 94.804688 C 37.914062 99.59375 49.078125 101.03125 59.875 98.886719 C 69.480469 96.976562 78.265625 92.300781 85.253906 85.371094 C 92.304688 78.386719 97.027344 69.65625 98.960938 60.039062 C 99.636719 56.675781 99.902344 53.996094 99.902344 50.285156 C 99.902344 47.910156 99.855469 46.925781 99.660156 45.128906 C 98.671875 35.808594 95.136719 27.136719 89.324219 19.773438 C 86.917969 16.722656 83.851562 13.675781 80.777344 11.285156 C 75.664062 7.304688 69.949219 4.410156 63.695312 2.628906 C 60.5625 1.742188 57.058594 1.128906 53.609375 0.867188 C 52.796875 0.804688 48.566406 0.746094 47.894531 0.789062 Z M 54.105469 24.300781 C 54.105469 24.355469 53.550781 25.921875 52.875 27.773438 L 51.636719 31..........完整代码请登录后点击上方下载按钮下载查看