如何在CSS中实现图像周围的花哨轮廓

Question

我有一个带有背景图片的div。我想在div / image周围添加一个看起来像泡泡的边框，如下所示：

有关如何解决此问题的任何想法？任何帮助将不胜感激。这是一个小提琴：

http://jsfiddle.net/1Loyyduc/

    body {
    background: navy
}

.mug div {
    width: 150px;
    height: 150px;
    border-radius: 75px;
    background: url(http://media-cache-ec0.pinimg.com/236x/03/5b/11/035b116cd6cfd398c0e779fcb8e73033.jpg) no-repeat;
    background-size: 150px 150px;
}

Answer 1

这里使用的是transform: skew();和伪元素。理想情况下它会有一个透明的背景，但我还没有做到这一点。

不要忘记用于倾斜的众多浏览器前缀，并在底部使用未加前缀的转换：

-webkit-transform:skew(41deg,0deg);
-moz-transform:skew(41deg,0deg);
/* etc */
transform:skew(41deg,0deg);

Have an example!

HTML

<div class="mug"></div>

CSS

.mug {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: url(http://media-cache-ec0.pinimg.com/236x/03/5b/11/035b116cd6cfd398c0e779fcb8e73033.jpg) no-repeat;
    background-size: 150px 150px;
    position: relative;

}    
.mug:before {
    content: '';
    display: block;
    border: solid 2px #FFF;
    position: absolute;
    height: 100%;
    width: 100%;
    padding: 6px;
    top: -8px;
    left: -8px;
    border-radius: 50%;
    z-index: -2;
    background: #333;
}
.mug:after {
    content: '';
    display: block;
    background: #333;
    -webkit-transform:skew(41deg,0deg);
    -moz-transform:skew(41deg,0deg);
    transform:skew(41deg,0deg);
    height: 30px;
    width: 51px;
    border-bottom: solid 2px #FFF;
    border-right: solid 2px #FFF;
    position: absolute;
    bottom: 10px;
    right: -16px;
    z-index: -1;
}

Answer 2

这是一个非常接近图像（不精确）并且非常容易实现的解决方案。在包装器中，添加以下属性：

.wrapper {
    width: 160px; /* a bit bigger than the image */
    height: 160px; /* a bit bigger than the image */
    border:2px solid #fff; /* adjust stroke width as desired */
    border-radius:80px; /* must be width/2 */
    border-bottom-right-radius:0; /* this creates the triangle on one corner */
}

Here是您示例中使用的代码。