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?

Is there a reason why you didn't use the StackSnippet to provide a live demo inside the question itself? It's just a matter of adding two comments to your question. — Bakuriu, Apr 07 '16 at 11:11
@SunilGehlot StackSnippet is an integrated HTML-JS-CSS demo on SO, as shown by the edit by web-tiki. — Andrew T., Apr 07 '16 at 11:30

score 38 · Accepted Answer · edited May 23 '17 at 11:51

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>

@Vucko I tweaked it a bit to 141% as `141 ~= √2 * 100 = the diagonal of the square`. — web-tiki, Apr 07 '16 at 08:46
Awesome... well i have one question though..how to give answer of question related to css/html before web-tiki and harry :p — Leo the lion, Apr 07 '16 at 09:19
I don't know why, but I'm getting a strange drawing error on the tail in the latest Firefox with the CSS version. http://i.stack.imgur.com/ggSC3.png — Alexander O'Mara, Apr 07 '16 at 17:21
@AlexanderO'Mara I changed the snippet to make the tail and used the [rotation approach](http://stackoverflow.com/a/24808936/1811992) for the tail. It works for me now in FF — web-tiki, Apr 11 '16 at 12:36
Hello, There's also gradient, radius and pseudo that can be used from a single element :) http://codepen.io/gc-nomade/pen/ZpGWPd — G-Cyrillus, Sep 07 '16 at 11:19

score 13 · Answer 2 · edited May 23 '17 at 11:59

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>

Nizam Kazi · Answer 3 · 2016-04-07T13:59:03.093

6

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/

edited Apr 07 '16 at 13:59

answered Apr 07 '16 at 09:14

Nizam Kazi

1,900
1
20
26

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

3 Answers3

With CSS :

With SVG

Bonus