css中的偏斜分离
问题描述:
所以我试图在CSS中进行偏斜分离(仅)。它应该看起来有点像这里:http://i.stack.imgur.com/hVCa1.pngcss中的偏斜分离
我试过用CSS转换已经(transform: skew(-15deg);
),但我不认为它适用于所有浏览器,它不是真的适应。我想过用线性渐变来做,但我不确定这是否更好。
你们知道有更好的解决方案吗?
编辑:下面的代码:
.results {
width: 500px; }
.transf {
height: 30px;
box-sizing: border-box;
-moz-box-sizing: border-box;
/* Firefox */
display: inline-block;
-moz-transform: skew(-15deg);
-webkit-transform: skew(-15deg);
-o-transform: skew(-15deg);
-ms-transform: skew(-15deg);
transform: skew(-15deg);
background: grey !important;
width: 6px;
margin-left: -4px;
margin-right: -5px;
z-index: 1; }
.left_border {
height: 30px;
box-sizing: border-box;
-moz-box-sizing: border-box;
/* Firefox */
display: inline-block;
-moz-transform: skew(-15deg);
-webkit-transform: skew(-15deg);
-o-transform: skew(-15deg);
-ms-transform: skew(-15deg);
transform: skew(-15deg);
background: yellow;
border-right: 1px solid green;
border-top: 1px solid green;
border-bottom: 1px solid green;
width: 10px;
margin-left: -15px;
z-index: 2; }
.right_border {
height: 30px;
box-sizing: border-box;
-moz-box-sizing: border-box;
/* Firefox */
display: inline-block;
-moz-transform: skew(-15deg);
-webkit-transform: skew(-15deg);
-o-transform: skew(-15deg);
-ms-transform: skew(-15deg);
transform: skew(-15deg);
background: orange;
border-left: 1px solid red;
border-top: 1px solid red;
border-bottom: 1px solid red;
width: 10px;
margin-right: -20px;
z-index: 2; }
.left {
height: 30px;
box-sizing: border-box;
-moz-box-sizing: border-box;
/* Firefox */
display: inline-block;
background: yellow;
width: 30%;
border: 1px solid green;
z-index: 0; }
.right {
height: 30px;
box-sizing: border-box;
-moz-box-sizing: border-box;
/* Firefox */
display: inline-block;
background: orange;
width: 20%;
border: 1px solid red;
z-index: 0; }
.item21 {
width: 5%; }
.item22 {
width: 15%; }
和HTML:
<div class="results">
<div class="left"></div>
<div class="left_border"></div>
<div class="transf"></div>
<div class="right_border"></div>
<div class="right"></div>
</div>
<div class="results">
<div class="left item21"></div>
<div class="left_border"></div>
<div class="transf"></div>
<div class="right_border"></div>
<div class="right item22"></div>
</div>
答
正如你所指出的那样,这可以用CSS3仅完成,但并不是所有的浏览器都支持它。对于完整的浏览器支持,我会使用jQuery
DEMO http://jsfiddle.net/kevinPHPkevin/UkAfD/26/
var skewed = false;
function skew() {
skewed = !skewed;
$('#box').css({
skewY: skewed ? '10deg' : '-10deg'
});
}
答
有一些事情可以做。
你可以使用转换与像CSSSandpaper到 一个填充工具使其跨浏览器兼容。虽然,要获得这种类型的 分离(div的一边是直的),您可能必须使用 偏斜和perspective。
您可以使用CSS triangle trick之前和之后的 伪类来制作人造分隔符。这也是 需要一个虚拟类像Selectivizr polyfill。你 也必须玩
border-width
值得到 它匹配你正在寻找。您可以使用PNG前/后伪类。
您可以使用SVG在容器周围绘制边框。
其中的任何一种都可以工作,但它绝对不像圆角或阴影那样容易。你需要做一些额外的工作来获得这些类型的结果。
邮政编码请。 – thatidiotguy