Ear sheet.

Question

I am trying to create a pointed sheet shape in CSS, as in the image http://i.imgur.com/KoN0PGo.jpg . I managed to figure out a way to create a default sheet shape, but there are some problems finding ways to create pointed corners. I am looking for ways to create half a leaf, as I intend to draw an image to enliven it, and each half of the leaves will be independent. Is there a way to create this form using CSS?

Default sheet form: https://jsfiddle.net/xwvyo1c5/

.leaf { width: 100px; height: 100px; background-color: #A0DE21; -moz-border-radius: 100px 0px; -webkit-border-radius: 100px 0px; border-radius: 100px 0px; } 

thanks

Answer 1

As another user told you ... this is a very complex form for CSS. SVG is the way to go.

Even if you are new to this, do not be afraid, it is not as difficult as it seems.

You can always use the svg generator online (a lot around) to create a form that will repeat many times. In this example, I use this generator online to get this code:

 <svg xmlns="http://www.w3.org/2000/svg" style="vector-effect: non-scaling-stroke;" stroke="null"> <g stroke="null"> <path stroke="#f90202" d="m70,159c102,-16.597 98.862,-36 138,-35c39.138,-2 49,19.403 134,35c-2,-0.403 -62.862,0 -138,0c-72.138,-1 -135,0.597 -134,0z" id="svg_10" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" fill="#fc0202"/> </g> </svg> 

Please note that this is a rough form. I did this in a few seconds, and for your project you may need to spend a little time to make the form better.

Then I just put the code in the container, duplicated it 7 times and absolutized each container with top , left and rotate .

And this is the final result: JSFIDDLE

 .leaf1 { position: absolute; top: 100px; left: 0; } .leaf2 { position: absolute; top: 100px; left: 200px; } .leaf3 { position: absolute; top: 135px; left: 83px; transform: rotate(-90deg); } .leaf4 { position: absolute; top: 18px; left: 233px; transform: rotate(90deg); } .leaf5 { position: absolute; top: 11px; left: 99px; transform: rotate(45deg); } .leaf6 { position: absolute; top: 199px; left: 75px; transform: rotate(-135deg); } .leaf7 { position: absolute; top: 115px; left: 324px; transform: rotate(135deg); } .leaf8 { position: absolute; top: 91px; left: 136px; transform: rotate(-45deg); } 

 <div class="leaf1"> <svg xmlns="http://www.w3.org/2000/svg" style="vector-effect: non-scaling-stroke;" stroke="null"> <g stroke="null"> <path stroke="#f90202" d="m70,159c102,-16.597 98.862,-36 138,-35c39.138,-2 49,19.403 134,35c-2,-0.403 -62.862,0 -138,0c-72.138,-1 -135,0.597 -134,0z" id="svg_10" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" fill="#fc0202" /> </g> </svg> </div> <div class="leaf2"> <svg xmlns="http://www.w3.org/2000/svg" style="vector-effect: non-scaling-stroke;" stroke="null"> <g stroke="null"> <path stroke="#f90202" d="m70,159c102,-16.597 98.862,-36 138,-35c39.138,-2 49,19.403 134,35c-2,-0.403 -62.862,0 -138,0c-72.138,-1 -135,0.597 -134,0z" id="svg_10" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" fill="#fc0202" /> </g> </svg> </div> <div class="leaf3"> <svg xmlns="http://www.w3.org/2000/svg" style="vector-effect: non-scaling-stroke;" stroke="null"> <g stroke="null"> <path stroke="#f90202" d="m70,159c102,-16.597 98.862,-36 138,-35c39.138,-2 49,19.403 134,35c-2,-0.403 -62.862,0 -138,0c-72.138,-1 -135,0.597 -134,0z" id="svg_10" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" fill="#fc0202" /> </g> </svg> </div> <div class="leaf4"> <svg xmlns="http://www.w3.org/2000/svg" style="vector-effect: non-scaling-stroke;" stroke="null"> <g stroke="null"> <path stroke="#f90202" d="m70,159c102,-16.597 98.862,-36 138,-35c39.138,-2 49,19.403 134,35c-2,-0.403 -62.862,0 -138,0c-72.138,-1 -135,0.597 -134,0z" id="svg_10" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" fill="#fc0202" /> </g> </svg> </div> <div class="leaf5"> <svg xmlns="http://www.w3.org/2000/svg" style="vector-effect: non-scaling-stroke;" stroke="null"> <g stroke="null"> <path stroke="#f90202" d="m70,159c102,-16.597 98.862,-36 138,-35c39.138,-2 49,19.403 134,35c-2,-0.403 -62.862,0 -138,0c-72.138,-1 -135,0.597 -134,0z" id="svg_10" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" fill="#fc0202" /> </g> </svg> </div> <div class="leaf6"> <svg xmlns="http://www.w3.org/2000/svg" style="vector-effect: non-scaling-stroke;" stroke="null"> <g stroke="null"> <path stroke="#f90202" d="m70,159c102,-16.597 98.862,-36 138,-35c39.138,-2 49,19.403 134,35c-2,-0.403 -62.862,0 -138,0c-72.138,-1 -135,0.597 -134,0z" id="svg_10" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" fill="#fc0202" /> </g> </svg> </div> <div class="leaf7"> <svg xmlns="http://www.w3.org/2000/svg" style="vector-effect: non-scaling-stroke;" stroke="null"> <g stroke="null"> <path stroke="#f90202" d="m70,159c102,-16.597 98.862,-36 138,-35c39.138,-2 49,19.403 134,35c-2,-0.403 -62.862,0 -138,0c-72.138,-1 -135,0.597 -134,0z" id="svg_10" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" fill="#fc0202" /> </g> </svg> </div> <div class="leaf8"> <svg xmlns="http://www.w3.org/2000/svg" style="vector-effect: non-scaling-stroke;" stroke="null"> <g stroke="null"> <path stroke="#f90202" d="m70,159c102,-16.597 98.862,-36 138,-35c39.138,-2 49,19.403 134,35c-2,-0.403 -62.862,0 -138,0c-72.138,-1 -135,0.597 -134,0z" id="svg_10" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" fill="#fc0202" /> </g> </svg> </div> 

Answer 2

CSS is a technology whose main purpose is to separate style information from content (HTML) and behavior (script server and client side).

Of course, this allows you to make rather beautiful and rather fluid animations (called transitions), which are mainly focused on translating elements between different states, but this does not mean that it is capable or a good option for drawing a figure or animation.

However, there are people who are working on this and making remarkable progress, despite the fact that IMHO this will not be a desirable approach to the problem. Check for example: https://www.css-tricks.com/examples/ShapesOfCSS/

SVG and HTML5 Canvas are technologies developed with the development of vector graphics in mind. They are designed for this, they are efficient, powerful and standardized, and they will allow you to fulfill your needs faster and better than if you tried to use technology that is not suitable for the problem.

They are definitely your way.

Answer 3

CSS

This is very difficult to do, and I almost certainly recommend you do it in SVG.

But as you requested it in CSS, and in some cases it is possible in CSS (although the design doesn’t work a bit), I will show a possible way to CSS and let you edit it in my content and work on SVG on average.

It uses positioning and transforms to rotate the elements into place.

 .container { width: 400px; height: 200px; overflow: hidden; position: relative; } .leaf { position: absolute; width: 30px; height: 100px; top: 25px; left: calc(50% - 15px); transition: all 0.2s ease; } .leaf:hover { width: 34px; left: calc(50% - 17px); } .leaf:before { content: ''; position: absolute; top: 0; left: 0; width: 15px; height: 100%; background: red; border-radius: 15px 0 0 15px / 50px 0 0 50px; } .leaf:after { content: ''; position: absolute; top: 0; right: 0; width: 15px; height: 100%; background: red; border-radius: 0 15px 15px 0 / 0 50px 50px 0; } .leaf:nth-child(1) { transform-origin: 0% 150%; transform: rotate(-90deg); } .leaf:nth-child(2) { transform-origin: 0% 150%; transform: rotate(-45deg); } .leaf:nth-child(3) { transform-origin: 100% 150%; transform: rotate(45deg); } .leaf:nth-child(5) { transform-origin: 100% 150%; transform: rotate(90deg); } 

 <div class="container"> <div class="leaf"></div> <div class="leaf"></div> <div class="leaf"></div> <div class="leaf"></div> <div class="leaf"></div> </div> 

Answer 4

you can change the shape a little, changing the initial values ​​of the border radius, a background gradient will also help draw lines:

I know this is not an answer, just look at the css options (to get a bg gradient to get a bg template to find out more), it can avoid using SVG for basic shapes or patterns.

 body { padding: 1em; } .leaf { width: 80px; height: 140px; background-image: linear-gradient(to top left, #A0DE21 49%, transparent 49.5%, transparent 51%, #A0DE21 51%); -moz-border-radius: 100% /120px 0px; -webkit-border-radius: 100% / 120px 0px; border-radius: 100% 0 / 140px 0px; } 

 <div class="leaf"></div> 

3 sheets can be

 body { padding: 1em; } .leaf, .leaf:last-of-type { box-shadow: -1px 1px 2px #835d46; width: 80px; height: 140px; background-image: linear-gradient(to top left, #A0DE21 49%, transparent 49.5%, transparent 51%, #A0DE21 51%); -moz-border-radius: 100% /120px 0px; -webkit-border-radius: 100% / 120px 0px; border-radius: 100% 0 / 140px 0px; display:inline-block; transform:rotate(15deg); margin:0 -0.5em; } .leaf:first-of-type { background-image: linear-gradient(to top right, #A0DE21 49%, transparent 49.5%, transparent 51%, #A0DE21 51%); border-radius: 0 100% /0 140px ; transform:rotate(-15deg); } .leaf:first-child + .leaf { transform:rotate(-29deg); vertical-align:1.3em; margin:0 -1em; } 

 <div class="leaf"></div> <div class="leaf"></div> <div class="leaf"></div>