Question

我想使用CSS HTML创建一个像这个图像的自定义形状：

我尝试使用border-radius但它不会保持不变

Answer 1

您是否尝试过border-top-left-radius和border-bottom-left-radius？

<!DOCTYPE html>
<html>
<head>
<style> 
div {

    padding: 10px;
    background: #1b1bfc;
    border-top-left-radius: 2em;
    border-bottom-left-radius: 2em;
}
</style>
</head>
<body>

<div>test</div>

</body>
</html>

Answer 2

尝试使用：

shape {

    border-bottom-left-radius: 1em;
    border-top-left-radius: 1em;

}

如果您计划将CSS放在该页面上，而不是单独的.css样式表上，那么您应该将上面的样式标记放在其中：

<style>
shape {

    border-bottom-left-radius: 1em;
    border-top-left-radius: 1em;

}
</style>

如果使用外部样式表，那么您只需将其链接到文档顶部即可。

Answer 3

您应该使用SVG：

＆＃13;

<svg width="173" height="118">
 <g>
  <path id="svg_3" d="m173.00287,117.8624l-86.50198,0l0,0c-47.774,0 -86.49779,1.25536 -86.50191,-58.92873c-0.00412,-60.18451 38.72791,-58.92869 86.50191,-58.92869l86.50198,0l0,117.85742z" stroke-opacity="null" stroke-width="0" stroke="#000" fill="#007fff"/>
 </g>
</svg>

＆＃13;

您可以根据需要进行编辑...
我使用http://editor.method.ac创建它，但您应该使用Adobe Illustrator，因为这是理想的，然后将其保存为svg格式化并将其作为HTML或CSS

放入您的代码中

Answer 4

每个角落的

border-radius需要两个值

Border-radius @ MDN

border-radius CSS属性允许Web作者定义圆角边缘的方式。每个角的曲线使用一个或两个半径定义，定义其形状：圆形或椭圆形。

因此，您可以将多个值应用于每个角落

div {
  width: 8em;
  height: 4em;
  background: blue;
  margin: 1em auto;
  border-top-left-radius: 6em 1.2em;
  border-bottom-left-radius: 6em 1.2em;
}

<div></div>

Answer 5

您可以使用from django.core.files.storage import FileSystemStorage class CustomWizardView(WizardView): file_storage = FileSystemStorage(location=os.path.join(settings.MEDIA_ROOT, 'photos'))属性来实现此效果。您可以阅读更多相关信息here。

注意：形状与上面发布的形状不同。

＆＃13;

border-radius

＆＃13;

.shape {
  background: #0677bd;
  border-radius: 6em 0 0 6em / .8em 0 0 .8em;
  height: 40px;
  width: 50px;
}

＆＃13;

如何创建自定义形状

5 个答案: