Css技巧，对角线

Question

我怎样才能使用纯css / css3重新创建它？你的选择可以包括一种设置边框选项的方法，即阴影样式。

修改

这就是我所拥有的：

.border_div{
    width: 200px;
    height: 5px;
    -webkit-transform: rotate(315deg);
    -moz-transform: rotate(315deg);
    transform: rotate(315deg);
    position: absolute;
    color: black;
    background-color: black;
    margin-top:15.5%; 
    margin-left:22%;
}

Answer 1

试试这个：DEMO（已编辑）

＆＃13;

＆＃13;

body { margin: 50px; }
div {
    width: 400px;
    height: 60px;
    position: relative;
    text-align: center;
}
div:before, div:after {
    content: " ";
    position: absolute;
    border-radius: 5px;
    border: 5px solid #000;
    left: 0;
    bottom: 0;
}

div:before { width: 400px; }
div:after {
    width: 100px;
    transform: rotate(-45deg);
    transform-origin: 5px 50%;
}

＆＃13;

<div>
     <h1>My Text</h1>
</div>

＆＃13;

＆＃13;

＆＃13;

由于简洁，省略了供应商前缀。

Answer 2

您可以使用Transform: skew css属性。 这是一个例子：

div {
    border-left: 5px solid black;
    border-bottom: 5px solid black;
    height: 35px;
    width: 200px;
    transform: skewX(-45deg);
    margin-left: 20px;
}

<强> Working Fiddle

Updated fiddle for header inside （使用伪类）