主页 / 问题 / 615186
Accepted
Александр
Asked:2020-01-16 15:44:40 +0000 UTC2020-01-16 15:44:40 +0000 UTC

如何在 CSS 中制作不均匀的形状？

  • 772

我需要制作这样的图，但我不知道如何正确制作。我制作了一个正方形并在其中before添加了一个裁剪的正方形border，但在不同的屏幕分辨率下它似乎“剥落”了。

在此处输入图像描述

html

3 个回答

  1. Best Answer

    渐变的第一个选项： 

    div {
  width: 500px;
  padding-bottom: 40%;
  max-width: 100%;
  background: #000;
  margin: 30px auto;
  border-top: 2px solid #000;

  background: linear-gradient(105deg,  #000 0%, #000 25%, #ae0000 25%, #ae0000 100%);

}
    <div></div>

    而且体积更大:before

    div {
  position: relative;
  width: 500px;
  padding-bottom: 40%;
  max-width: 100%;
  background: #ae0000;
  margin: 30px auto;
  border-top: 2px solid #000;
  overflow: hidden;
}
div:before {
  content: '';
  position: absolute;
  background: #000;
  width: 100%;
  height: 100%;
  right: 50%;
  transform: rotate(-80deg);
  -webkit-transform: rotate(-80deg);
  -moz-transform: rotate(-80deg);
  -o-transform: rotate(-80deg);
  -ms-transform: rotate(-80deg);
}
    <div></div>

    以及带有 SVG 背景的版本：

    div {
  width: 500px;
  padding-bottom: 40%;
  max-width: 100%;
  margin: 30px auto;
  border-top: 2px solid #000;

  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NjAuMDAwMSAzNjQuNDU3Ij48cG9seWdvbiBwb2ludHM9IjE4Ni44MzYgMCAxNzkuMzMzIDAgMTMyLjE0MyAzNjQuNDU3IDY2MCAzNjQuNDU3IDY2MCAwIDE4Ni44MzYgMCIgZmlsbD0iI2FlMWExNyIvPjxwb2x5Z29uIHBvaW50cz0iMCAwIDAgMzY0LjQ1NyAxMzIuMTQzIDM2NC40NTcgMTc5LjMzMyAwIDAgMCIvPjwvc3ZnPg==') no-repeat center / cover;
  
}
    <div></div>

    要在所有浏览器中使用最后一个选项，您需要通过任何Base64 编码器取代 SVG 代码。例如，像这样的样式：

    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 660.0001 364.457"><polygon points="186.836 0 179.333 0 132.143 364.457 660 364.457 660 0 186.836 0" fill="#ae1a17"/><polygon points="0 0 0 364.457 132.143 364.457 179.333 0 0 0"/></svg>') no-repeat center / cover;

    我们编码和替换，如示例中所示。

    • 16

  2. 除了特定的应用程序，显然，使用渐变的解决方案就足够了，这些形状可以使用clip-path.

    .megablock {
  display: flex;
}

.block {
  height: 400px;
  flex-grow: 1;
}
.block--black {
  background-image: linear-gradient(#000, #999);
  clip-path: url(#polygon-1);
  clip-path: polygon(0 0, 80% 0, 100% 100%, 0% 100%);
}

.block--color {
  background-image: linear-gradient(rgba(0, 192, 255, 0.8), #ff9);
  clip-path: url(#polygon-2);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);
}
    <div class="megablock">
  <div class="block block--black"></div>
  <div class="block block--color"></div>
</div>

<svg class="clip">
  <defs>
    <clipPath id="polygon-1" clipPathUnits="objectBoundingBox" >
      <polygon points="0 0, 0.8 0, 1 1, 0 1" />
    </clipPath>
    
    <clipPath id="polygon-2" clipPathUnits="objectBoundingBox" >
      <polygon points="0 0, 1 0, 1 1, 0.2 1" />
    </clipPath>
  </defs>
</svg>

    • 13

  3. 通过梯度解决方案：

    /* Чтобы не было скролла */
body {
  margin: 0;
}

.with-gradient {
  background: linear-gradient(100deg, #000 30%, #ac0000 0);
  
  /* Просто для демонстрации */
  height: 100vh;
}
    <div class="with-gradient">
</div>

    小记：

    我使用0两个渐变步长以避免重复之前的值，因为根据规范，渐变步长不能小于之前的值。

    如果色标的位置小于列表中它之前任何色标的指定位置，则将其位置设置为等于它之前任何色标的最大指定位置。

    • 8

相关问题