使用css的圆形图像

Question

这里我创建了圆形图像。但它涵盖了所有角落。 我只想在左角有影响。

CODEPEN：CODEPEN DEMO

.circular {

    border-radius: 5px;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    background: url(http://link-to-your/image.jpg) no-repeat;
    }

我很感激，如果有人可以改进这一点，以显示它类似于CODEPEN中的图像。 circular类位于css部分的底部

还需要帮助定位两个标签

Answer 1

您可以使用border-top-left-radius，border-top-right-radius，border-bottom-left-radius和border-bottom-right-radius来制作特定的角落。

Answer 2

<强> CSS

.circular {


   border:5px solid;
   border-top-left-radius:150px;
   background: url(http://link-to-your/image.jpg) no-repeat;
}

Answer 3

你也可以将你的css简写为单行。请记住，边框顺序是：

左上角，右上角，右下角，左下角

因此，如果您想控制特定边框，请执行以下操作：

.circular { 
    border-radius: 150px 0 0 150px; 
    background: url("image path") no-repeat; 
}