How to build a special polygon a kite shape with HTML CSS only

0 votes

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>

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

May 27, 2022 in CSS by Edureka
• 13,620 points
1,110 views

1 answer to this question.

0 votes

I made two divs, one for Arc and one for Tail. Because mainkite overflow is set to hidden, I wrapped mainkite and tale in a single div to appropriately position the tail.

answered May 28, 2022 by Edureka
• 12,690 points

Related Questions In CSS

0 votes
0 answers

How to make a back-to-top button using CSS and HTML only?

I want to scroll down and up ...READ MORE

Jun 30, 2022 in CSS by Edureka
• 13,620 points
302 views
0 votes
1 answer

Rails - how to integrate a form with bootstraps css?

Here is how I did it  in my ...READ MORE

answered Jun 28, 2022 in CSS by Edureka
• 12,690 points
945 views
0 votes
1 answer

CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page

A simple solution is to make the ...READ MORE

answered Jun 21, 2022 in CSS by Edureka
• 12,690 points
3,532 views
0 votes
1 answer

I want to create a small square colour filled box in HTML & CSS. And most important - I want to write one line after the box

Try using the square html entity: <div style="color:blue">&a ...READ MORE

answered Jun 28, 2022 in CSS by Edureka
• 12,690 points
4,894 views
0 votes
1 answer

html/css hexagon with image inside

The CSS3 clip-path feature is a novel ...READ MORE

answered Jun 10, 2022 in CSS by Edureka
• 12,690 points
1,795 views
0 votes
1 answer

Double arc shape with CSS jquery or javascript

But for this shape I would use ...READ MORE

answered Jun 14, 2022 in JQuery by gaurav
• 23,260 points
925 views
0 votes
0 answers

How can I create a round arrow with only HTML and CSS?

Using CSS and HTML, I'm attempting to ...READ MORE

Jul 8, 2022 in CSS by Edureka
• 13,620 points
982 views
0 votes
0 answers

how to draw a rectangle in HTML or CSS?

I am trying to draw a rectangle ...READ MORE

Aug 18, 2022 in CSS by Edureka
• 13,620 points
843 views
0 votes
1 answer

Is there any way to colorize a white PNG image with CSS only?

Filters can be used with -webkit-filter and ...READ MORE

answered May 27, 2022 in CSS by Edureka
• 12,690 points
1,465 views
0 votes
1 answer

How to hide image broken Icon using only CSS/HTML?

Because CSS/HTML has no means of knowing ...READ MORE

answered May 31, 2022 in CSS by Edureka
• 12,690 points
3,346 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP