我知道可以偏斜,但我看不到以特定角度偏斜每个角的方法。
这是我正在从事的项目: 专门查看菜单中的标签。现在,我正在使用图像,我想针对功能强大的浏览器进行更改。
我知道可以创建CSS trapazoid,但是使用没有内容的边框。最终结果还需要一些圆角。
div { height: 20px; padding:2px 5px 0 5px; color:white; background: rgba(0,0,0,.5); margin: 0 10px; position: relative; border-top-left-radius: 6px 4px; border-top-right-radius: 6px 4px; font-family:sans-serif; font-size:13px; line-height:20px; vertical-align:bottom; display:inline-block; white-space:nowrap; } div:before { content: ''; line-height: 0; font-size: 0; width: 0; height: 0; border-bottom: 19px solid rgba(0,0,0,.5); border-left: 9px solid transparent; position: absolute; bottom: 0; left: -9px; } div:after { content: ''; line-height: 0; font-size: 0; width: 0; height: 0; border-bottom: 19px solid rgba(0,0,0,.5); border-right: 9px solid transparent; position: absolute; bottom: 0; right: -9px; } .b { background:black; margin:0 -7px 0 20px; } .b:after, .b:before { border-bottom-color:black; }
这可能是一个大概的想法:
div { width: 200px; height: 100px; background: #ddd; margin: 20px 150px; position: relative } div:before { content: ''; line-height: 0; font-size: 0; width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid #ddd; border-left: 50px solid transparent; border-right: 50px solid #ddd; position: absolute; top: 0; left: -99px; } div:after { content: ''; line-height: 0; font-size: 0; width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid #ddd; border-left: 50px solid #ddd; border-right: 50px solid transparent; position: absolute; top: 0; right: -99px; } <div>Hello</div> <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus ex quis enim posuere auctor.</div>