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?
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.
All you have to do is to change border-radius: 40px to border-radius: 50% .
Using:
.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>
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 :
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>
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>
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With