Question

我需要一个帮助来使用CSS3制作reuleaux三角形，就像在图像下方一样。形状周围有白色边框。怎么可能？

Answer 1

CSS不是创建此类形状的正确工具，即使它们可以使用它创建。它们将需要多个真实/伪元素，变换等，甚至维护曲线，它们的半径等都非常棘手。当你需要它们周围的边框或者必须在它们中放置图像或渐变时，它会变得更加复杂。

用于创建此类形状的最佳和推荐工具是SVG，因为它们具有以下优点：

SVG本质上是可扩展的，因此非常适合响应式设计
SVG形状可以将图像或渐变视为填充
曲线和半径控制非常理想

下面是使用SVG创建reuleaux三角形形状的示例代码段。它只需要一个带有3个Quadratic Curveto命令的单一路径元素。

＆＃13;

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%);
}

＆＃13;

<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>

＆＃13;

通过使用带有内联SVG的CSS剪辑路径也可以实现相同的目的，但是IE中不存在支持，因此不推荐使用。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

SVG解决方案

＆＃13;

svg {
  border: 1px solid black;
}

＆＃13;

<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>

＆＃13;

Answer 3

这种形状可以在单个元素中使用纯CSS，并且具有一点点创造力。

它并不完全是上面的形状，因为它有圆角，但它仍然非常接近。

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

这是另一种可能的方法

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

如何使用CSS3创建reuleaux三角形

3 个答案:

SVG解决方案