How to create a reuleaux triangle shape using CSS3

Question

I need help to make reuleaux triangle shape using CSS3 as below. The shape has a white frame around. How is this possible?

Answer 1

CSS is not a suitable tool for creating such forms, even if they can be created using it. They will require several real / pseudo-elements, transformations, etc., And even then maintaining the curves, their radii, etc. Very difficult. This becomes even more complicated when you need borders around them or they have to place images or gradients in them.

The best and recommended tool for creating such forms is SVG, as they have the following pros:

• SVGs are scalable in nature and therefore very good for flexible designs.
• SVG shapes can take images or gradients as fills
• Curve and radius control is very optimal

The following is a snippet of an example for creating a reuleaux triangle shape using SVG. All he needs is one element of the path with three quadratic curveo teams.

svg { height: 200px; width: 200px; } path { fill: steelblue; stroke: white; stroke-width: 2; } path.image { fill: url(#g-image); } body { background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%); } 

 <svg viewBox="0 0 105 105" preserveAspectRatio="none"> <path d="M2,15 q50,-25 100,0 q0,50 -50,85 q-50,-30 -50,-85z" /> </svg> <svg viewBox="0 0 105 105" preserveAspectRatio="none"> <defs> <pattern id="g-image" width="1" height="1" patternUnits="objectBoundingBox"> <image xlink:href="http://lorempixel.com/200/200/nature/4" width="200" height="200" /> </pattern> </defs> <path d="M2,15 q50,-25 100,0 q0,50 -50,85 q-50,-30 -50,-85z" class="image" /> </svg> 

---

The same can be achieved using CSS Clip-path with built-in SVG for this path, but support in IE is not available for this, and therefore is not recommended.

 div { position: relative; background: white; height: 200px; width: 200px; -webkit-clip-path: url(#clipper); clip-path: url(#clipper); } div:after { position: absolute; content: ''; height: calc(100% - 4px); width: calc(100% - 4px); top: 2px; left: 2px; background: steelblue; -webkit-clip-path: url(#clipper); clip-path: url(#clipper); } div.image:after{ background: url(http://lorempixel.com/200/200); } body { background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%); } /* Just for demo */ div{ display: inline-block; } 

 <svg width="0" height="0"> <defs> <clipPath id="clipper" clipPathUnits="objectBoundingBox"> <path d="M0,0.15 q0.5,-0.25 1,0 q0,0.5 -0.5,0.85 q-0.5,-0.3 -0.5,-0.85z" /> </clipPath> </defs> </svg> <div></div> <div class='image'></div> 

Answer 2

SVG Solution

 svg { border: 1px solid black; } 

 <svg width="400px" viewBox="0 0 100 100"> <path stroke="black" d="m50 90, q -40 -20, -40 -80, q 40 -10, 80 0, q 0 60, -40 80z" /> </svg> 

Answer 3

This form is possible with pure CSS in one element with a little creativity.

This is not quite the shape, as stated above, since it has rounded corners, but it is still pretty damn close.

 div { width: 200px; height: 200px; background: blue; border-radius: 75% 75% 80% 80% / 15% 15% 150% 150%; } 

 <div></div> 

Here is another possible way to do this.

 div { width: 200px; height: 200px; background: blue; border-radius: 10% 100% 100% 0 / 100% 100% 10% 0; transform: rotate(-45deg); margin-left: 50px; } 

 <div></div>