0

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

transform: skew(-15deg);我已经尝试过使用 CSS 转换（我想过用线性渐变来制作它，但我不确定这是否更好。

你们知道有什么更好的解决方案吗？

编辑：这是代码：

.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>
4

2 回答 2

0

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

演示http://jsfiddle.net/kevinPHPkevin/UkAfD/26/

var skewed = false;
function skew() {
    skewed = !skewed;        
    $('#box').css({
        skewY: skewed ? '10deg' : '-10deg'
    });
}
于 2013-08-21T18:49:29.493 回答
0

你可以做几件事。

  • 您可以将转换与 CSSSandpaper 之类的polyfill一起使用，以使其跨浏览器兼容。虽然，要获得这种类型的分离（div 的一侧是直的），您可能必须使用 skew AND perspective。

  • 您可以通过使用带有CSS 三角形技巧的 before 和 after 伪类来制作人造分隔符。这也需要像Selectivizr这样的伪类的 polyfill 。您还必须使用这些border-width值以使其与您正在寻找的内容相匹配。

  • 您可以使用 before/after 伪类来使用 PNG。

  • 您可以使用SVG在容器周围绘制边框。

这些中的任何一个都可以，但它绝对不像圆角或阴影那么容易。您需要付出一些额外的工作才能获得这些类型的结果。

于 2013-08-21T18:54:43.717 回答