23

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

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?

3
  • 1
    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 7, 2016 at 11:11
  • What is StackSnippet ? Apr 7, 2016 at 11:14
  • @SunilGehlot StackSnippet is an integrated HTML-JS-CSS demo on SO, as shown by the edit by web-tiki.
    – Andrew T.
    Apr 7, 2016 at 11:30

3 Answers 3

38

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>

7
  • Those values (142%, -21%)... However, it works! nice :)
    – Vucko
    Apr 7, 2016 at 8:42
  • 3
    @Vucko I tweaked it a bit to 141% as 141 ~= √2 * 100 = the diagonal of the square.
    – web-tiki
    Apr 7, 2016 at 8:46
  • 2
    Awesome... well i have one question though..how to give answer of question related to css/html before web-tiki and harry :p Apr 7, 2016 at 9:19
  • 2
    I don't know why, but I'm getting a strange drawing error on the tail in the latest Firefox with the CSS version. i.stack.imgur.com/ggSC3.png Apr 7, 2016 at 17:21
  • 1
    Hello, There's also gradient, radius and pseudo that can be used from a single element :) codepen.io/gc-nomade/pen/ZpGWPd
    – G-Cyrillus
    Sep 7, 2016 at 11:19
13

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>

0
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/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.