Question

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

我可以使用剪辑路径完成此操作，但我希望能够兼容更多浏览器（例如旧浏览器，即歌剧和歌剧）。

我想可能使用内联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>

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

1 个答案: