css-shapes

I need to implement a wave shape with CSS3, I tried to implement with CSS3 Shapes, but I has not reached the desired result. * { margin: 0; padding: 0; } body { background: #007FC1; } .container, .panel { border-bottom: 4px solid #B4CAD8; } .container { background-color: #fff; } .container > .text { padding: 0.5em; } .panel { position: relative; float: right; width: 200px; height: 40px; margin-top: -4px; background-color: #fff; line-height: 42px; text-align: center; } .panel:before { content: ''; position: absolute; left: -44px; width: 0; height: 0; border-top: 44px solid #B4CAD8; border-left:

I know that it is possible to make a corner like this: .left-corner { width: 0; height: 0; border-top: 100px solid powderblue; border-left: 100px solid transparent; } <div class="left-corner"></div> Is it possible to make a corner with CSS with multiple colors out of an element. Like this? Well you could use a peusdo element and put it above your original Element, if you want it to exactly look like the image you've posted. See Code Snippet below. .left-corner{ width: 0; height: 0; border-top: 120px solid red; border-left: 120px solid transparent; position:relative; } .left-corner:before {

I need to draw two curves, using CSS. I have tried to assemble some div s, using CSS border-radius to draw the curved panel. But the result is bad. Any better arithmetic? Harry As I had mentioned in comments earlier, please do not use CSS for achieving complex curves and shapes. While it is still possible to use CSS to achieve them (using transform + pseudo-elements like shown in this thread or using box-shadows in this thread ), the process is very complex and you can't get much control over the shape, its curvature etc also. SVG on the other hand is designed for such graphics and it can also

Just realized I have yet to see this. But can not believe it isn't possible. I'm looking to draw a triangle in pure CSS/HTML. An equilateral if possible. Clarification: I don't wish to use an image to achieve this. You would need to be able to put content inside the div. ScottS One Solution Diagonals are not easy. One solution is to overlay pseudo-elements to create the border, assuming you are dealing with solid background colors. Then you have to position the content to make it look nice. You could even do some text wrapping . Here is a basic example using this code: CSS & HTML Respectively

I want to use basic CSS to make triangle in an HTML page. I am using triangle pics which take time to load, so, I want to decrease loading time of my page. Not possible with HTML, but with CSS. Example: <div class="triangle></div> .triangle { width: 0; height: 0; border: solid 30px; border-color: transparent transparent black transparent; } Live demo: jsFiddle 30px in the border property defines the size: width and height. You can change it if you want a smaller or a bigger triangle. if you want to rotate the triangle, switch the position of black and transparent in the border-color property.

Effect I want to achieve: Very similar questions: How can I wrap text around a non rectangular image? - but the other way around ( they want to wrap text around, I want to keep text inside) Wrapping text around non-rectangular shapes css/html Potential solutions: http://www.csstextwrap.com/ - a bit dated - mentions IE6 and Netscape, does not mention Chrome http://baconforme.com/ As in Novemeber 2015 - can we do better than that? I managed to find this article about CSS shapes - http://www.chenhuijing.com/blog/why-you-should-be-excited-about-css-shapes/ - but they are not ready for prime time

I am trying to make the following slanted div. I have nearly achieved the shape below however the bottom is not slanting in the correct direction as my shape below. How can i correct this? Shape Attached http://jsfiddle.net//fgdcq3qp/ CSS .slanted { background: red; box-sizing: border-box; height: 40vh; width: 100%; position: relative; padding: 20px; } .slanted:before { content: ""; background: red; height: 40px; transform: skewY(2deg); position: absolute; left: 0; right: 0; z-index: -1; } .slanted:after { content: ""; background: red; height: 40px; transform: skewY(1deg); position: absolute;

Closed . This question needs to be more focused . It is not currently accepting answers. Want to improve this question? Update the question so it focuses on one problem only by editing this post . Closed 4 years ago . I want to design a shape as similar as the following image(effect between circle and rectangle): I know the circle shape is designed using border-radius and the rectangle like shape is designed with some unordered list having style display: block . But I can't understand how to keep the circle over rectangle so that it looks like that some portion of the rectangle is cut down by

I'm looking for a way to draw the bottom portion of this circle using CSS or SVG. I've seen this answer but it deals with a perfect half circle, whereas I need an extra segment cut off to make it a bit less than half. It's probably not possible with pure CSS but the SVG answer gets complicated for me to modify. <svg class="pie"> <circle cx="115" cy="115" r="110"></circle> <path d="M115,115 L115,5 A110,110 1 0,1 225,115 z"></path> </svg> You can do it with CSS: .partial-circle { position: relative; height: 20px; width: 100px; overflow: hidden; } .partial-circle:before { content: ''; position: