如何创建以下，响应，形状并添加文本？

问题描述 投票：0回答：1
我想在HTML/CSS中创建此设计，并在每个看起来像的正方形上添加文本。

union squares我可以在HTML和CSS中实现它？

这种模式也应该响应灵敏，这就是为什么我希望它以后在各种屏幕上进行编码，以便我可以修改和调整。 我想知道是否可以在CSS中进行这些类型的形状？

我尝试了夹具掩码，但它并没有像我所显示的那样给出整个东西。我还尝试直接添加图像，并以绝对方式添加文本，但在1200px以下的小屏幕上打破了设计。任何帮助将不胜感激。

这里是附件的代码，它给出了上半年，我只想知道如何实现所有四个。

body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f5f5f5; } .union-shape { width: 800px; height: 300px; background: linear-gradient(to bottom, #e8ebfa, #c2c6f1); clip-path: path("M 0,50 A 50,50 0 0 1 50,0 H 450 A 50,50 0 0 1 500,50 V 120 A 50,50 0 0 0 550,170 H 850 A 50,50 0 0 1 900,220 V 250 A 50,50 0 0 1 850,300 H 50 A 50,50 0 0 1 0,250 Z"); position: relative; } /* Optional Grid Overlay */ .union-shape::before { content: ""; position: absolute; width: 100%; height: 100%; background-image: linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px), linear-gradient(to right, rgba(255, 255, 255, 0.1) 1px, transparent 1px); background-size: 40px 40px; top: 0; left: 0; }

<body> <div class="union-shape"></div> </body>
    

	


仅使用SVG编辑器创建适当的路径的问题。我最喜欢的是boxysvg
。



html

css

responsive-design


1个回答




    
    
    

        

            

                

                    
0
投票

                    
                

            

        

        



body {
  background-color: #f5f5f5;
}

.union-shape {
  width: 800px;
  height: 250px;
  position: relative;
  background: linear-gradient(to bottom, #e8ebfa, #c2c6f1);
  clip-path: path("M 19 14.796 L 218.862 14.796 C 229.355 14.796 237.862 23.303 237.862 33.796 L 237.9 56.1 C 237.9 66.6 246.4 75.1 256.9 75.1 C 256.9 75.1 367.5 75.1 367.466 75.082 C 378 75.1 386.1 65.4 386.146 54.926 C 386.1 54.9 386.146 19 386.146 19 C 386.146 8.507 394.653 0 405.146 0 L 605.008 0 C 615.501 0 624.008 8.507 624.008 19 L 624 22.8 C 624 33.3 632.5 41.8 643 41.8 L 781 41.821 C 791.493 41.821 800 50.328 800 60.821 L 800 209.738 C 800 220.231 791.493 228.738 781 228.738 L 581.138 228.738 C 570.645 228.738 562.138 220.231 562.138 209.738 C 562.138 209.738 562.1 205.9 562.1 205.9 C 562.1 195.4 553.6 186.9 543.068 186.914 C 543.1 186.9 445.9 186.9 445.9 186.9 C 435.4 186.9 426.9 195.4 426.9 205.9 L 426.887 231 C 426.887 241.493 418.38 250 407.887 250 L 208.025 250 C 197.532 250 189.025 241.493 189.025 231 L 189 220.7 C 189 210.2 180.5 201.7 170 201.7 L 19 201.713 C 8.507 201.713 0 193.206 0 182.713 L 0 33.796 C 0 23.303 8.507 14.796 19 14.796 Z");
}

/* Optional Grid Overlay */
.union-shape::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(to right, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 40px 40px;
  top: 0;
  left: 0;
}

.union-shape > * {
  position: absolute;
  border: 2px solid rgb(255 0 0 / 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  border-radius: 19px;
}

.union-shape > :nth-child(1) {
  left: 0px;
  top: 15px;
  width: 238px;
  height: 187px;
}

.union-shape > :nth-child(2) {
  left: 189px;
  top: 75px;
  width: 238px;
  height: 175px;
}

.union-shape > :nth-child(3) {
  left: 386px;
  top: 0px;
  width: 238px;
  height: 187px;
}

.union-shape > :nth-child(4) {
  left: 562px;
  top: 42px;
  width: 238px;
  height: 187px;
}

<div class="union-shape">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
</div>






    

	



    

    


  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2025. All rights reserved.