How to create reuleaux triangle shape using CSS3

Question

I need a help to make reuleaux triangle shape using CSS3 like below the image. The shape has a white border around. How is it possible?

Answer 1

CSS is not the right tool for creating such shapes even though they can be created using it. They will require multiple real/pseudo-elements, transforms etc and even then maintenance of the curves, their radii etc are very tricky. It gets even more complex when you require borders around them or have to place images or gradients inside them.

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

• SVGs are scalable by nature and so are very good for responsive designs
• SVG shapes can take images or gradients as fills
• Curve and radii control is very optimum

Below is a sample snippet for creating the reuleaux triangle shape using SVG. All it needs is a single path element with 3 Quadratic Curveto commands.

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 by using CSS Clip-path with inline SVG for the path also but the support is non-existent in IE for this and hence it 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>