尝试创建一个没有剪辑路径的草率矩形

Question

我正在尝试创建一个顶部边框倾斜、右侧边框向左倾斜、从左向右倾斜且底部应保持笔直的框。它需要看起来像这样：

我可以使用剪辑路径完成此操作，但我希望兼容更多浏览器（如旧版浏览器，即 & opera）。

我想也许可以使用内联 SVG，但我认为在 SVG 中必须指定高度，我希望框的高度将由其内容定义（动态）。

Answer 1

这是我模仿你的形象的尝试。

<!DOCTYPE HTML><html><head><meta charset="utf-8">
<title>Slanted Borders</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
<style>
.slanted{
    display:block;
    position:relative;
    margin:50px auto;
    padding:20px 20px 0; /* border space */
    width:600px;
    overflow:hidden;
}
.slanted:before,
.slanted:after,
.slanted-top:before{
    position:absolute;
    top:20px;
    left:0;
    border:solid transparent;
    border-top-color:tan;
    border-width:600px 0 0 20px; /* left border (top as max box height) */
    width:0;
    height:0;
    content:"\a0";
}
.slanted:after{
    right:0;
    left:auto;
    border-width:600px 20px 0 0; /* right border (top as max box height) */
}
.slanted-top:before{
    position:absolute;
    top:0;
    border-color:transparent;
    border-left-color:tan;
    border-width:20px 0 0 640px; /* top border width+padding (right as box length) */
}
.slanted-top{
    padding:10px;
    background:tan; /* background-color same as borders */
}
.slanted p{
    margin:1em;
}
.slanted a{
    display:block;
    margin:1em;
}
.slanted a:hover{
    height:20em;
}
</style>
</head><body>
 
<div class="slanted">
    <div class="slanted-top">
        <p>Slanted Borders</p>
        <a href="#nogo">Hover to expand</a>
    </div>
</div>
 
</body></html>

尝试创建一个没有剪辑路径的草率矩形

Trying to create a sloppy rectangle without clip path

css

transform

mask

clip