Question

所以我试图在CSS（仅）中进行偏斜分离。它应该看起来像这样：http://i.stack.imgur.com/hVCa1.png

我已经尝试过使用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>

Answer 1

正如您所指出的，这可以仅使用CSS3完成，但并非所有浏览器都支持它。对于完整的浏览器支持，我使用jQuery

DEMO http://jsfiddle.net/kevinPHPkevin/UkAfD/26/

var skewed = false;
function skew() {
    skewed = !skewed;        
    $('#box').css({
        skewY: skewed ? '10deg' : '-10deg'
    });
}

Answer 2

你可以做一些事情。

您可以将变换与CSSSandpaper之类的polyfill一起使用使其跨浏览器兼容。虽然，要获得那种类型分离（div的一侧是直的）你可能需要使用倾斜AND perspective。
您可以使用之前和之后制作仿制分隔符 CSS triangle trick的伪类。这也是要求polyfill用于伪类Selectivizr。您还需要使用border-width值来获取它符合您的要求。
您可以使用前/后伪类使用PNG。
您可以使用SVG绘制容器周围的边框。

任何这些都可行，但它绝对不像圆角或阴影那么容易。你需要做一些额外的工作来获得这些类型的结果。

在css中偏斜分离

2 个答案: