试图创建一个没有剪辑路径的草率矩形
Posted
技术标签:
【中文标题】试图创建一个没有剪辑路径的草率矩形【英文标题】：Trying to create a sloppy rectangle without clip path 【发布时间】：2016-06-20 18:17:05 【问题描述】：我正在尝试创建一个顶部边框倾斜、右边框向左倾斜、从左到右且底部应保持笔直的框。 它需要看起来像这样：
我可以使用剪辑路径来完成此操作，但我希望兼容更多浏览器（如旧浏览器，即 & Opera）。
我认为可能使用内联 SVG，但我认为在 SVG 中必须指定高度，并且我希望框的高度将由其内容（动态）定义。
【问题讨论】：
请看here，因为我认为您会在提供的答案中找到足够的答案。 【参考方案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>
【讨论】：
谢谢！花了几天时间试图弄清楚我如何才能做到这一点。以上是关于试图创建一个没有剪辑路径的草率矩形的主要内容，如果未能解决你的问题，请参考以下文章