CSS中的对角楔形 - 边缘到边缘在浏览器中居中

Question

我一直在尝试使用CSS制作这个形状。

理想情况下，它将覆盖整个浏览器窗口的长度，可能会延伸到视野之外以支持更大的屏幕，并且居中以使角度不变。

有人有解决方案吗？

而且我认为我可能会遇到角度的锯齿问题。我可能需要使用图像。但我想使用CSS。

** 图片拼写错误。(无限期不可避免)

- Varazi

---

无论哪种方法都可以，我都可以接受。 - Varazi

使用CSS 3渐变非常简单，只需参考：http://www.colorzilla.com/gradient-editor/ - Paul Sullivan

请点击此处查看已更改CSS3渐变的fiddle示例 - 请注意，它会优雅地回退，但并非所有浏览器都能完全按照您的要求显示。http://jsfiddle.net/Q9pWr/ - Paul Sullivan

如果您需要完全跨浏览器，我建议使用图像。不过，我知道还有另一种选择，涉及使用斜角边框颜色的头部螺旋方法来生成任何大小和尺寸的三角形，如果您必须仅使用CSS。 - Paul Sullivan

我之前尝试过类似的东西，我认为你不会像图片那样得到好的抗锯齿效果（特别是如果角度可以随浏览器窗口大小而改变）。如果你不想边缘看起来太锐利，我建议选择图片选项。 - Zhihao

看一下Matt Coughlin的回答——这是一个非常好的方法。 - Paul Sullivan

Answer 1

一种不需要CSS3支持的解决方案：

jsfiddle 演示

HTML

<div class="shape">
    <div class="top"></div>
    <div class="bottom"></div>
</div>

层叠样式表

.shape {
    width:400px;
    margin:0 auto;
}
.top {
    height:0;
    border-width:0 0 150px 400px;
    border-style:solid;
    border-color:transparent #d71f55 #d71f55 transparent;
}
.bottom {
    height: 50px;
    background-color:#d71f55;
}

/* Support transparent border colors in IE6. */
* html .top {
    filter:chroma(color=#123456);
    border-top-color:#123456;
    border-left-color:#123456;
}

注意：在一些浏览器中，对角线会出现过度的抗锯齿效果（比如过度模糊或阴影）。这个技巧在现代浏览器上有时可能会有点不可预知。

- Matt Coughlin

---

使用边界三角形法，加一分-很久以前在JavaScript + CSS / DOM 3D演示中看到过。不错！ - Paul Sullivan

关于这个技巧的一些演示，请参见：http://www.forestpath.org/apps/webmotion/css-fg/animation.html?test=polygons 和 http://www.forestpath.org/apps/webmotion/css-fg/animation.html?test=show-right-triangles。 - Matt Coughlin

谢谢链接 - 再次+1 ;) - Paul Sullivan

它运行得很好，比我想象的简单得多，谢谢 :) - Tien Do

Answer 2

我创建了一个扩展版（以及Sass版本）的Matt Coughlin的优秀答案，我在我的博客（德语）中发布了它并分叉了他的jsfiddle演示。 HTML

<div class="diagonal-shape bl-to-tr"></div>
<div class="block">Diagonal Shape</div>
<div class="diagonal-shape tr-to-bl"></div>
<br><br><br><br><br>
<div class="diagonal-shape tl-to-br"></div>
<div class="block">block2</div>
<div class="diagonal-shape br-to-tl"></div>

CSS（层叠样式表）

/**
 * Draw a diagonal shape, e.g. as diagonal segregation
 * 
 * @author: Matt Coughlin, Pascal Garber
 *
 * @param $color: The color of the shape, default #d71f55
 * @param $direction:
 *  bl-to-tr for bottom-left to top right
 *  tr-to-bl for top-right to bottom left
 *  tl-to-br for top-left to bottom right
 *  br-to-tl for bottom-right to top left
 * @param $height: The height of the shape, default 100px
 * @param $width: The width of the shape, default 100vw
 * @param $color: The color of the shape, default #d71f55
 *
 * @see also: https://dev59.com/rWgu5IYBdhLWcg3wy558#11074735
 */
.diagonal-shape.bl-to-tr {
  height: 0;
  border-style: solid;
  border-width: 0 0 100px 100vw;
  border-color: transparent #d71f55 #d71f55 transparent;
}
.diagonal-shape.tr-to-bl {
  height: 0;
  border-style: solid;
  border-width: 100px 100vw 0 0;
  border-color: #d71f55 transparent transparent #d71f55;
}
.diagonal-shape.tl-to-br {
  height: 0;
  border-style: solid;
  border-width: 0 100vw 100px 0;
  border-color: transparent transparent #d71f55 #d71f55;
}
.diagonal-shape.br-to-tl {
  height: 0;
  border-style: solid;
  border-width: 100px 0 0 100vw;
  border-color: #d71f55 #d71f55 transparent transparent;
}

.block {
    height: 200px;
    line-height: 200px;
    background-color: #d71f55;
    color: white;
    text-align: center;

}

/* Support transparent border colors in IE6. */
* html .top {
    filter:chroma(color=#123456);
    border-top-color:#123456;
    border-left-color:#123456;
}

SCSS

/**
 * Draw a diagonal shape, e.g. as diagonal segregation
 * 
 * @author: Matt Coughlin, Pascal Garber
 *
 * @param $color: The color of the shape, default #d71f55
 * @param $direction:
 *  bl-to-tr for bottom-left to top right
 *  tr-to-bl for top-right to bottom left
 *  tl-to-br for top-left to bottom right
 *  br-to-tl for bottom-right to top left
 * @param $height: The height of the shape, default 100px
 * @param $width: The width of the shape, default 100vw
 * @param $color: The color of the shape, default #d71f55
 *
 * @see also: https://dev59.com/rWgu5IYBdhLWcg3wy558#11074735
 */
@mixin diagonal-shape($color: #d71f55, $direction: 'bl-to-tr', $height: 100px, $width: 100vw) {
    height: 0;
    border-style: solid;

    @if $direction == 'bl-to-tr' {
        border-width: 0 0 $height $width;
        border-color: transparent $color $color transparent;
    } @else if $direction == 'tr-to-bl' {
        border-width: $height $width 0 0;
        border-color: $color transparent transparent $color;
    } @else if $direction == 'tl-to-br' {
        border-width: 0 $width $height 0;
        border-color: transparent  transparent $color $color;
    } @else if $direction == 'br-to-tl' {
        border-width: $height 0 0 $width;
        border-color: $color $color transparent  transparent ;
    }
}

.diagonal-shape {
    &.bl-to-tr {
        @include diagonal-shape($brand-primary, 'bl-to-tr');
    }
    &.tr-to-bl {
        @include diagonal-shape($brand-primary, 'tr-to-bl');
    }
    &.tl-to-br {
        @include diagonal-shape($brand-primary, 'tl-to-br');
    }
    &.br-to-tl {
        @include diagonal-shape($brand-primary, 'br-to-tl');
    }
}

使用 SCSS Mixin，您可以轻松创建自己的类：

.your-claas {
    @include diagonal-shape($color, $direction, $height, $width);
} 

- JumpLink