边界半径的SVG路径

Question

是否可以仅使用CSS border-radius？

制作这样的形状http://grab.by/Efqk

这是小提琴：http://jsfiddle.net/9tjgof09/

.avatars {
    padding: 50px;
    overflow: hidden;
    list-style: none;
}

.avatars strong {
    display: block;
}
.avatars li {
    float: left;
    width: 100px;
    margin-right: 40px;
}

.avatar {
    position: relative;
    width: 100px;
    height: 100px;
    overflow: hidden;
}

.avatars img {
    width: 100%;
    height: 100%;
    vertical-align: top;
}

.avatar-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
}

.avatar-css img {
    border-radius: 25px/25px;
}

Answer 1

你可以用css做各种各样的形状，看看我放在你底部的化身，第一个长度到边缘半径是水平，第二个垂直。 fiddle

＆＃13;

＆＃13;

#myAvatar{
    border-top-left-radius:5px 25px;
    border-top-right-radius:20px 55px;
    border-bottom-left-radius:30px 25px;
    border-bottom-right-radius: 50px 25px;
}

＆＃13;

 <img id="myAvatar" src="http://lorempixel.com/100/100" />

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是可能的，但您需要使用的不仅仅是边界半径。这是一个例子：

fiddle link

#tv {
position: relative;
width: 200px;
height: 150px;
margin: 20px 0;
background: red;
border-radius: 50% / 10%;
color: white;
text-align: center;
text-indent: .1em;
}
#tv:before {
content: '';
position: absolute;
top: 10%;
bottom: 10%;
right: -5%;
left: -5%;
background: inherit;
border-radius: 5% / 50%;
}