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

【问题标题】：Trying to create a sloppy rectangle without clip path试图创建一个没有剪辑路径的草率矩形
【发布时间】：2016-06-20 18:17:05
【问题描述】：

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

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

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

【问题讨论】：

请看here，因为我认为您会在提供的答案中找到足够的答案。

标签： css transform mask clip

【解决方案1】：

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

JsFiddle

<!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>

【讨论】：

谢谢！花了几天时间试图弄清楚我如何才能做到这一点。