如何仅使用HTML和CSS构建一个特殊的多边形（风筝形）？

Question

如何仅使用HTML和CSS构建一个特殊的多边形（风筝形）？

23

我正在开发我的新项目，在其中需要一些不规则结构。其中之一是：

我已经实现的是：

.mainkite {
  width: 200px;
  height: 200px;
  background: #f00;
  transform: skew(180deg, 180deg) rotate(45deg);
  position: relative;
  margin: 0px auto;
  margin-top: 50px;
  overflow: hidden;
}
.midLine {
  border: solid 1px #000;
  transform: skew(180deg, 180deg) rotate(45deg);
  position: absolute;
  top: 99px;
  width: 140%;
  left: -41px;
}

<div class="mainkite">
  <div class="midLine"></div>
</div>

jsfiddle

如何获得我想要的图形的其余部分？

- Sunil Gehlot

1

你为什么没有使用StackSnippet在问题本身提供实时演示的原因是什么？这只需要在你的问题中添加两个注释即可。 - Bakuriu

什么是 StackSnippet？ - Sunil Gehlot

@SunilGehlot StackSnippet是SO上集成的HTML-JS-CSS演示，正如web-tiki的编辑所示。 - Andrew T.

3个回答

13

web-tiki提供的答案非常出色，我建议使用SVG来创建复杂的形状，原因与他的回答中提到的相同。然而，使用CSS可以相对简单地创建这个形状，并且以下是另一种只使用一个元素创建此形状的变体。

黑色的尾部是一个伪元素，而红色的风筝是它的box-shadow。中间的线是在父元素上使用linear-gradient创建的，而弯曲的线条则是第二个伪元素。

我已经为所有部分使用了视口单位，以使输出具有响应性。这是因为盒子阴影无法使用百分比值，也不能具有响应性，除非使用视口单位。

.kite {
  position: relative;
  height: 25vw;
  width: 25vw;
  background: linear-gradient(to right, transparent calc(50% - 1px), black calc(50% - 1px), black calc(50% + 1px), transparent calc(50% + 1px));
  overflow: hidden;
}
.kite:before {
  position: absolute;
  content: '';
  top: calc(84.5% + 1px);  /* (15/25 * 1.414 is approximately 84.5% + 1px for correction */
  left: 50%;
  height: 15vw;
  width: 15vw;
  background: black;
  transform-origin: left top;
  transform: rotate(45deg);
  box-shadow: -15vw -15vw 0px red; /* the x and y are same as height and width */
  z-index: -1;
}
.kite:after {
  position: absolute;
  content: '';
  top: calc(0% - 2px);
  left: calc(50% + 1px);
  width: calc(15vw - 2px);
  height: calc(15vw - 1px);
  border-top-left-radius: 100%;
  border-left: 2px solid #000;
  border-top: 2px solid #000;
  transform-origin: left top;
  transform: rotate(45deg);
}

<div class="kite"></div>

- Harry

6

我为圆弧和尾部分别创建了两个div。我将mainkite和tale包装在一个div中，以使尾部的定位正确，因为mainkite的溢出设置为hidden。

您可以查看我的jsfiddle：https://jsfiddle.net/80qs2a4y/7/ 通过简单地添加border-radius: 50%;并将宽度和高度增加到200％来创建Arc。

参考：使用CSS ONLY创建三角形：https://css-tricks.com/snippets/css/css-triangle/

- Nizam Kazi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- web-tiki · Accepted Answer

使用CSS：

需要使用：

仅 HTML 和 CSS
2 个元素和 2 个伪元素
在内部线条上使用border-radius和transforms
对于底部三角形，使用边框技术

.kite {
  position: relative;
  width: 200px; height: 200px;
  background: #f00;
  transform: rotate(45deg);
  margin: 0px auto;
  margin-top: 50px;
}
.kite:before, .kite:after {
  content: '';
  position: absolute;
}
.kite:before {
  top: 50%; left: -20.5%;
  width: 141%;
  margin-top:-1px;
  border-top: 2px solid #000;
  transform: rotate(45deg);
}
.kite:after {
  top: 0; left: 0;
  width: 198px; height: 198px;
  border-top-left-radius: 100%;
  border-left: 2px solid #000;
  border-top: 2px solid #000;
}
.tail {
  position: absolute;
  top: 199px; left: 199px;
  width:60px; height:60px;
  overflow:hidden;
}
.tail:before{
  content:'';
  display:block;
  width:141%; height:100%;
  background:#000;
  transform-origin:0 100%;
  transform:rotate(-45deg);
}

<div class="kite"><span class="tail"></span>
</div>

使用SVG

你应该考虑另一种方法，即使用内联SVG。由于你似乎正在创建一个图形元素，因此在语义上使用SVG可能更为合适，并且：

易于扩展
代码更短
对形状和曲线的控制更好

在下面的示例中，我使用polyline元素来制作红色正方形、底部黑色三角形和垂直线。对于圆形线条，我使用带有二次贝塞尔曲线命令的路径元素：

svg{display:block;width:400px;margin:0 auto;}

<svg viewbox="0 0 10 10">
  <polyline fill="red" points="5 0 9 4 5 8 1 4" />
  <polyline points="5 0 5.05 0.05 5.05 7.95 5 8 4.95 7.95 4.95 0.05" />
  <path d="M1.05 4.05 Q5 1 8.95 4.05" fill="none" stroke-width="0.1" stroke="#000" />
  <polyline points="5 8 6 9 4 9 " />
</svg>

奖励

感谢Harry让我思考更多并找到了另一种只使用一个

的CSS方法：

.kite {
  position: relative;
  width: 200px; height: 200px;
  background: #f00;
  transform: rotate(45deg);
  margin: 0px auto;
  margin-top: 50px;
}
.kite:before, .kite:after {
  content: '';
  position: absolute;
}
.kite:before {
  top: 50px; left: -41px;
  width: 282px; height: 2px;
  margin-top: -1px;
  background: #000;
  transform-origin: 141px 52px;
  transform: rotate(45deg);
  background-clip: content-box;
  border-right: 50px solid #000;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
}
.kite:after {
  top: 0; left: 0;
  width: 198px; height: 198px;
  border-top-left-radius: 100%;
  border-left: 2px solid #000;
  border-top: 2px solid #000;
}

<div class="kite"></div>