html - div 左上角/右下角的斜 Angular

Question

我们如何在纯 CSS 中创建这个形状？

Answer 1

你可以像下面这样:

html

<div class="topleft">
    <div class="buttomright"></div>
</div>

and the css

div {
    height: 300px;
    background: silver;
    position: relative;
}
.topleft:after {
    content:'';
    position: absolute;
    top: 0;
    left: 0;

    border-top: 80px solid white;
    border-right: 80px solid silver;
    width: 0;
}

    .buttomright:before {
        content:'';
        position: absolute;
        bottom: 0;
        right: 0; 
        border-bottom: 80px solid white;
        border-left: 80px solid silver;
        width: 0;
    }

请参阅JSFiddle