我需要一个帮助,使用
CSS3制作reuleaux三角形形状,如下图所示.形状周围有白色边框.这怎么可能？
解决方法
CSS不是创建此类形状的正确工具,即使它们可以使用它创建.它们将需要多个真实/伪元素,变换等,甚至曲线的维护,它们的半径等都非常棘手.当您需要它们周围的边框或必须在其中放置图像或渐变时,它会变得更加复杂.
用于创建此类形状的最佳和推荐工具是SVG,因为它们具有以下优点：
> SVG本质上是可扩展的,因此非常适合响应式设计
> SVG形状可以将图像或渐变作为填充
>曲线和半径控制非常佳
下面是使用SVG创建reuleaux三角形形状的示例代码段.它只需要一个带有3个Quadratic Curveto命令的单路径元素.
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,-85z" class="image" /> </svg>
通过使用带有内联SVG的CSS剪辑路径也可以实现相同的目的,但是在IE中不支持这种支持,因此不推荐使用.
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,#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.5 -0.5,0.85 q-0.5,-0.3 -0.5,-0.85z" />
</clipPath>
</defs>
</svg>
<div></div>
<div class='image'></div>
