Как создать специальный полигон (форма кайта) только с HTML и CSS?

Я работаю над своим новым проектом, и в этом мне нужны некоторые нерегулярные структуры. Один из них является:

Я достиг:

.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>

Ответы

Ответ 1

С CSS:

Использование:

только HTML и CSS
2 элемента и 2 псевдо элемента
border-radius и преобразования для внутренних линий
техника границ для нижнего треугольника

.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>

Ответ 2

Ответ, полученный 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>

Ответ 3

Я создал два div для Arc и Tail соответственно. Я обернул mainkite и tale в один div, чтобы правильно установить хвост, так как переполнение mainkite было установлено как hidden.

Вы можете увидеть мой jsfiddle: https://jsfiddle.net/80qs2a4y/7/

Arc создается простым добавлением border-radius: 50%; и увеличением ширины и высоты до 200%.

Ref: Создайте треугольник, используя ТОЛЬКО CSS: https://css-tricks.com/snippets/css/css-triangle/