主页 / 问题 / 1533756
Accepted
NoNaMe
Asked:2023-08-02 16:39:57 +0000 UTC2023-08-02 16:39:57 +0000 UTC

帮助解决 html css 上的自定义块

  • 772

谁知道如何解决这个问题？也许代码笔上已经保存了某种现成的解决方案，或者也许有人遇到过类似的问题并可以分享其解决方案？谢谢

问题

html

3 个回答

  1. Best Answer

    这种安排可以使用 来实现clip-path。如果您正在使用界面设计程序，请将形状保存为 svg，然后获取其路径并将其粘贴到clip-path: path()：

    .body {
  display: flex;
  justify-content: center;
  width: 600px;
}

.block {
  background: #5A80FF;
  width: 95px;
  height: 55px;
  border-radius: 10px;
  color: #fff;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.img-figure-1 {
  clip-path: path("M110,0H290a10,10,0,0,1,10,10V130a10,10,0,0,1-10,10H215a15,15,0,0,0-15,15v35a10,10,0,0,1-10,10H10A10,10,0,0,1,0,190V70A10,10,0,0,1,10,60H85a15,15,0,0,0,15-15V10A10,10,0,0,1,110,0Z");
  background: url("https://media.istockphoto.com/id/1288385045/ru/%D1%84%D0%BE%D1%82%D0%BE/%D0%B7%D0%B0%D1%81%D0%BD%D0%B5%D0%B6%D0%B5%D0%BD%D0%BD%D1%8B%D0%B9-%D0%BF%D0%B8%D0%BA-k2.jpg?s=612x612&w=0&k=20&c=MxlQOac2Ud_KNb1lWhpSTyJjHUgVqTK2VZMOQDtozCw=");
  background-size: cover;
  width: 300px;
  height: 200px;
  position: relative;
  right: 95px;
}

.img-figure-2 {
  clip-path: path("M0,190V155a10,10,0,0,1,10-10H85a15,15,0,0,0,15-15V10A10,10,0,0,1,110,0h80a10,10,0,0,1,10,10V190a10,10,0,0,1-10,10H10A10,10,0,0,1,0,190Z");
  background: url("https://i2.wp.com/origins.org.ua/pictures/photo_%2012.jpg");
  background-size: cover;
  width: 200px;
  height: 200px;
  position: relative;
  right: 190px;
}
    <body class="body">
  <div class="block">Красивые пейзажи</div>
  <div class="img-figure-1"></div>
  <div class="img-figure-2"></div>
</body>

    • 3 

  2. .container {
  width: 400px;
  height: 160px;
  border: 1px solid black;
  position: relative;
  margin: auto;
}

.block1 {
  width: 100px;
  height: 50px;
  background-color: violet;
  border-radius: 10px;
  position: absolute;
  top: 10px;
  left: 10px;
  bottom: 10px;
}

.block2 {
  width: 200px;
  height: 140px;
  background-color: darkred;
  border-radius: 10px;
  position: absolute;
  clip-path: polygon(0 45%, 55% 45%, 55% 0, 85% 0%, 100% 0, 100% 15%, 100% 66%, 63% 66%, 63% 100%, 15% 100%, 0 100%, 0% 85%);
  top: 10px;
  left: 10px;
  bottom: 10px;
}

.block3 {
  width: 100px;
  height: 30px;
  background-color: red;
  border-radius: 10px;
  position: absolute;
  top: 10px;
  left: 220px;
  bottom: 10px;
}

.block4 {
  width: 50px;
  height: 140px;
  background-color: gray;
  border-radius: 10px;
  position: absolute;
  top: 10px;
  left: 330px;
  bottom: 10px;
}

.block5 {
  width: 170px;
  height: 100px;
  background-color: green;
  border-radius: 10px;
  position: absolute;
  clip-path: polygon(0 65%, 43% 65%, 43% 0, 85% 0%, 100% 0, 100% 15%, 100% 85%, 100% 100%, 85% 100%, 15% 100%, 0 100%, 0% 85%);
  top: 50px;
  left: 150px;
  bottom: 10px;
}

.block1 p {
  padding: 0;
  margin: 0;
  font-size: 12px;
  text-align: center;
}

.block3 p {
  padding: 0;
  margin-top: 10px;
  font-size: 12px;
  text-align: center;
}
    <div class="container">
  <div class="block1">
    <p>lorem ipsum</p>
    <hr>
    <p>lorem ipsum</p>
  </div>
  <div class="block2"></div>
  <div class="block3">
    <p>lorem ipsum</p>
  </div>
  <div class="block4"></div>
  <div class="block5"></div>
</div>

    也许不是最理想的例子，但作为一种选择，你可以考虑。

    • 1

  3. 将红色框和它下面的框合并为一个 div

    div{
display:flex;
flex-direction:column;
align-items:flex-end;
}

    B 只需将其移至左侧 - margin-left:-100px;

    • -5

相关问题