小编Yas*_*ari的帖子

创建围绕特殊斜角 css 形状的边框?

我想创建一个围绕斜角的边框,如下所示。

在此输入图像描述

我当前用于创建斜角的代码是:

.contact {
    flex-grow: 2;
    z-index: 2;
    position:relative;
    display: block;
    margin: 40px 40px;
    padding: 60px; 
    text-align: center;
    background-color: #343434;
}

.bevel {
    overflow:hidden;
    clip-path: polygon(
        0 10%,
        10% 0,
        90% 0,
        100% 10%,
        100% 90%,
        90% 100%,
        10% 100%,
        0% 90%,
        0% 10%);
}
Run Code Online (Sandbox Code Playgroud)
<form id="contact" class="contact bevel">
  <!-- content makes up width and height --!>
</form>
Run Code Online (Sandbox Code Playgroud)

我不知道如何制作边框,我制作斜角的方式也是一个问题,因为它是百分比而不是像素,这使得它看起来很奇怪。我还需要边框来处理只有一个斜角的形状。

谢谢

html css

2
推荐指数
1
解决办法
223
查看次数

标签 统计

css ×1

html ×1