How to build a special polygon (a kite shape) with HTML & CSS only?

Question

I'm working on my new project and in this I need some irregular structures. One of them is:

What I achieved is:

.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

How can I get the rest of the shape I desire?

Answer 1

With CSS :

Using:

• only HTML and CSS
• 2 elements and 2 pseudo elements
• border-radius and transforms for the inner lines
• the border technique for the bottom triangle

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

With SVG

Another approach you should consider is using an inline SVG. As you seem to be making a graphical element, SVG migh be more appropriate semanticaly and :

• be easily scalable
• shorter code
• better control over the shapes and curves

In the following example I use polyline elements to make the red square, the bottom black triangle and the vertical line. For the circular line, I use a path element with a quadratic bezier curve command :

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>

Bonus

Thx to Harry for making me think this out some more and make me find another CSS only approach with one div :

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

Answer 2

I created two divs for Arc and Tail respectively. I wrapped mainkite and tale in one div to position tail properly as mainkite overflow has been set as hidden.

You can see my jsfiddle: https://jsfiddle.net/80qs2a4y/7/

Arc is created by simply adding border-radius: 50%; and increasing width and height to 200%.

Ref: Create triangle using CSS ONLY : https://css-tricks.com/snippets/css/css-triangle/

Answer 3

The answer given by web-tiki is wonderful and I'd recommend using SVG for complex shapes for the same reasons indicated in his answer. This shape however is reasonably simple to create with CSS and below is another variant for creating this with only one element.

The black tail part is a pseudo-element whereas the red kite is its box-shadow. The line in the middle is created using a linear-gradient on the parent and the curved string is the second pseudo.

I have used viewport units for all the parts to make the output be responsive. This is because the box shadows can't take percentage values and cannot be responsive unless viewport units are used.

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