我可以在CSS中做对角线吗？

Question

我想要一个这样的设计：

所以实际上左侧是background-color，右侧是background-color（divs当然很容易）。

但我可以用CSS做对角线吗？

Answer 1

您可以使用偏斜的伪元素来实现此形状：

<强> DEMO

HTML：

<div>
    <h1>Your title here</h1>
</div>

CSS：

div{
    padding:0 10px 10px;
    background:#E7E5DD;

}
h1{
    margin:0;
    display:inline-block;
    position:relative;
    z-index:1;
    padding:10px 50px 10px;
    overflow:hidden;
}
h1:before{
    content:'';
    width:100%; height:100%;
    position:absolute;
    top:0; left:0;
    background:#fff;
    z-index:-1;

    -webkit-transform: skewX(-20deg);
    -ms-transform: skewX(-20deg);
    transform: skewX(-20deg);

    -webkit-transform-origin:0 0;
    -ms-transform-origin:0 0;
    transform-origin:0 0;
}

Answer 2

如果您想使用纯CSS - 请参阅

1. http://css-tricks.com/snippets/css/css-triangle/和
2. http://apps.eky.hk/css-triangle-generator/

（灰色区域需要一个白色的左上角三角形）

width: 0;
height: 0;
border-style: solid;
border-width: 200px 200px 0 0;
border-color: #fff transparent transparent transparent;

请注意，某些浏览器在绘制边框时不会使用消除锯齿功能。

在这种情况下，一种更简单的方法是使用背景图像 - 一个用于带有对角线的文本，另一个用于灰色区域。

Answer 3

http://jsfiddle.net/nuxcbqqq/1/

<div class="crossed"></div>

.crossed {
width: 100px;
height: 100px;
background: 
   linear-gradient(to top left,
       rgba(0,0,0,0) 0%,
       rgba(0,0,0,0) calc(50% - 0.8px),
       rgba(0,0,0,1) 50%,
       rgba(0,0,0,0) calc(50% + 0.8px),
       rgba(0,0,0,0) 100%),
   linear-gradient(to top right,
       rgba(0,0,0,0) 0%,
       rgba(0,0,0,0) calc(50% - 0.8px),
       rgba(0,0,0,1) 50%,
       rgba(0,0,0,0) calc(50% + 0.8px),
       rgba(0,0,0,0) 100%);
}

此处的代码draw diagonal lines in div background with CSS