Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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?

like image 885
Sunil Gehlot Avatar asked Apr 07 '16 08:04

Sunil Gehlot


People also ask

How do I create a polygon shape in CSS?

CSS | polygon() Function The polygon() function is an inbuilt function in CSS which is used with the filter property to create a polygon of images or text. Syntax: polygon( percentage | length); Parameter: This function accepts two parameter percentage or length which is used to hold the value of polygon size.

How do you make an oval shape in CSS?

All you have to do is to change border-radius: 40px to border-radius: 50% .


2 Answers

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>
like image 65
web-tiki Avatar answered Oct 09 '22 12:10

web-tiki


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>
like image 44
Harry Avatar answered Oct 09 '22 12:10

Harry