css - 我可以在CSS中画对 Angular 线吗？

Question

我想要这样的设计:

所以实际上左侧有background-color，右侧有background-color(divs当然，很简单)。

但是我可以用CSS做对 Angular 线吗？

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;
}