如何使 div 有超过 4 个角答案

【问题标题】：How can I make a div having more than 4 corners如何使 div 有超过 4 个角
【发布时间】：2020-02-06 19:25:10
【问题描述】：

我必须只使用 HTML 和 CSS 制作div，但不能使用任何超过 4 个角的背景图片。

我该怎么做？

【问题讨论】：

你尝试过的代码在哪里？
我在主 div 中使用带有 css style="right:0; top:0"; 的绝对属性的弯曲图像；
取决于您的目标，您可以使用网络字体来实现这一目标。示例：design.google.com/icons/#ic_folder
如果上半部分用于保存实际的内容（如文本），那么使用单个 div 是不可能的。 HTML 元素是矩形的，并且只有是矩形的。
@Talent Runners 你能解释一下为什么要赏金吗？没有任何答案适合你吗？

【解决方案1】：

您可以使用pseudo-element 和一些 css 形状技巧来实现这一点。

.folder {
  width: 190px;
  height: 110px;
  background: #888;
  position: relative;
  overflow: hidden;
}

.folder:after {
  content: "";
  width: 100px;
  border: 15px solid transparent;
  position: absolute;
  right: -15px;
  border-top-color: #fff;
  top:0;
}

&lt;div class="folder"&gt;&lt;/div&gt;

【讨论】：

尝试将background-image 设置为您的身体。 christo's answer 更好，因为如果div 的父级（例如body）有一些背景，这个背景不会被伪元素覆盖。
@AbhishekPandey 遗憾的是，OP 的要求是您提供更灵活解决方案的唯一动力。关于纯色背景，我不会说“完美”这个词：你必须在伪元素中重复你的背景颜色。 DRY 原则也适用于 CSS，我认为尽可能避免重复代码是很好的。
我同意你的观点，对于每种情况总是有更好的解决方案，但当时，这个答案适用于 OP。如果 OP 对此答案不满意，我会更新我的答案或撤回它所以可以选择一个好的答案。

【解决方案2】：

有两个代码示例：CSS（+动画）和SVG。

带动画

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #2196f3;
}

.page {
  height: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -moz-box-align: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
}

.folder {
  background-color: #d3eafd;
  position: relative;
  width: 92px;
  height: 64px;
  display: block;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
}

.folder-tab {
  position: absolute;
  height: 10px;
  left: 0;
  bottom: 100%;
  display: block;
  width: 40%;
  border-top-left-radius: 8px;
  background-color: inherit;
}
.folder-tab:after {
  content: '';
  position: absolute;
  display: block;
  top: 0;
  left: calc(100% - 10px);
  border-bottom: 10px solid #d3eafd;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.folder-icn {
  padding-top: 12px;
  width: 100%;
  height: 100%;
  display: block;
}

.downloading {
  width: 30px;
  height: 32px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.custom-arrow {
  width: 14px;
  height: 14px;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -7px;
  background-color: #fff;
  -webkit-animation-name: downloading;
  -webkit-animation-duration: 1.5s;
  -webkit-animation-iteration-count: infinite;
  animation-name: downloading;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
}
.custom-arrow:after {
  content: '';
  position: absolute;
  display: block;
  top: 100%;
  left: -9px;
  border-top: 15px solid #fff;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
}

.bar {
  width: 30px;
  height: 4px;
  background-color: #fff;
  margin: 0 auto;
}

@-webkit-keyframes downloading {
  0% {
    top: 0;
    opacity: 1;
  }
  50% {
    top: 110%;
    opacity: 0;
  }
  52% {
    top: -110%;
    opacity: 0;
  }
  100% {
    top: 0;
    opacity: 1;
  }
}
@keyframes downloading {
  0% {
    top: 0;
    opacity: 1;
  }
  50% {
    top: 110%;
    opacity: 0;
  }
  52% {
    top: -110%;
    opacity: 0;
  }
  100% {
    top: 0;
    opacity: 1;
  }
}

<div class="page">
  
  <div class="folder">
    <span class="folder-tab"></span>
    <div class="folder-icn">
      <div class="downloading">
        <span class="custom-arrow"></span>
      </div>
      <div class="bar"></div>
    </div>
  </div>
</div>

SVG

<!DOCTYPE html>
<html>
<body>

<svg height="32px" version="1.1" viewBox="0 0 32 32" width="32px" xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink"><title/><desc/><defs/><g fill="none" fill-rule="evenodd" id="Page-1" stroke="none" stroke-width="1"><g fill="#157EFB" id="icon-94-folder"><path d="M17,11 L15,7 L4.00276013,7 C2.89666625,7 2,7.88967395 2,8.991155 L2,27.008845 C2,28.1085295 2.89971268,29 3.99328744,29 L29.0067126,29 C30.1075748,29 31,28.1073772 31,27.0049107 L31,12.9950893 C31,11.8932319 30.1029399,11 28.9941413,11 L17,11 Z" id="folder"/></g></g>
  </svg>

</body>
</html>

有用的链接：

More about SVG (W3C)
The Shapes of CSS（CSS 技巧）

【讨论】：

svg 在这里不可用。要求是使用 css 来完成

【解决方案3】：

div {
	width: 280px;
	height: 280px;
	background: #1e90ff;
	-webkit-clip-path: polygon(48% 13%, 100% 13%, 100% 60%, 100% 100%, 0 100%, 0 0, 29% 0);
clip-path: polygon(48% 13%, 100% 13%, 100% 60%, 100% 100%, 0 100%, 0 0, 29% 0);
}

/* Center the demo */
html, body { height: 100%; }
body {
	display: flex;
	justify-content: center;
	align-items: center;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

【解决方案4】：

只有一个块级元素，您可以设置:before 伪元素的样式，以在包含<div> 的上方创建倾斜选项卡。

div {
  margin: 40px;
  width: 150px;
  height: 80px;
  background: red;
  position: relative;
  padding: 10px;
  color: #fff;
}

div:before {
  content:"";
  position: absolute;
  left: 0;
  top: -20px;
  width: 70px;
  height: 0;
  border-bottom: 20px solid red;
  border-right: 20px solid transparent;
}

&lt;div&gt;content&lt;/div&gt;

注意：与使用 clip-path 解决方案相比，这对旧版浏览器（和 IE）的支持应该更好。

【讨论】：

【解决方案5】：

使用 HTML5 的“画布”的另一种方式：

<div>
  <canvas id="cnv" height="200" width="400"></canvas>
  <script>
    var canvas = document.getElementById('cnv');
    if (canvas.getContext) {
      var ctx = canvas.getContext('2d');
      ctx.beginPath();
      ctx.moveTo(0, 0);
      ctx.lineTo(100, 0);
      ctx.lineTo(130, 25);
      ctx.lineTo(200, 25);
      ctx.lineTo(200, 125);
      ctx.lineTo(0, 125);
      ctx.closePath();
      ctx.fillStyle = "gray";
      ctx.fill();
    }
  </script>
</div>

【讨论】：

【解决方案6】：

您可以使用单个元素和两个渐变来实现这一点（一个渐变用于矩形，另一个用于选项卡）：

div {
  width: 280px;
  height: 200px;
  background: linear-gradient(to bottom, transparent 31px, #656d78 31px),
    linear-gradient(-135deg, transparent 32%, #656d78 32%);
}

&lt;div&gt;&lt;/div&gt;

这也可以通过使用伪元素的单个渐变（用于制表符）来实现：

div {
  width: 280px;
  height: 169px;
  background-color: #656d78;
  margin-top: 39px;
  position: relative;
}

div:after {
  content: "";
  position: absolute;
  top: -31px;
  left: 0;
  width: 100%;
  height: 31px;
  background: linear-gradient(-135deg, transparent 50%, #656d78 50%);
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

【解决方案7】：

如果可以插入代码，则可以使用 SVG 图形。

如果没有，您可以绘制矢量图形 css clip-path 作为上面的答案。有一些生成器，here 是我找到的一个

另一种选择是使用至少 3 个 div，在其中一个中使用 css transform 倾斜一个，并使用相对 os 绝对定位来定位每个。

【讨论】：

如果您尝试使用六边形作为基本形状？
剪辑路径：多边形（50% 0%、100% 25%、100% 75%、50% 100%、0% 75%、0% 25%）；这是用于测试 div 的六边形代码.. 但它仍然显示为一个矩形
是的，我明白了...谢谢...我使用的是 Firefox，它显示为矩形...现在我在 chrome 及其多边形上看到了谢谢
是的，这不是一个非常推荐的方法，并不是所有的浏览器都支持它。尝试 svg 或 3 个 div，其中一个倾斜以获得更好的兼容性

【解决方案8】：

您可以使用 CSS 制作多边形的 div。

.myDiv {
  -webkit-clip-path: polygon(48% 16%, 100% 16%, 100% 100%, 0% 100%, 0 0, 32% 0);
  clip-path: polygon(48% 16%, 100% 16%, 100% 100%, 0% 100%, 0 0, 32% 0);
}

或者您可以使用此网站创建任何类型的多边形形状（在线）

https://www.cssportal.com/css-clip-path-generator/

【讨论】：