如何在div上进行直角三角形切割？

Question

这是我想要的结果：

我使用的边界如下：

border: 10px blue solid;
border-right: 10px white solid;

但它只是在右侧形成梯形形状。有没有办法在纯CSS中实现我想要的东西？ div本身可能包含其他一些DOM元素，例如p，h1-h6或其他div。

Answer 1

这很简单。只需使用以下css：

Button

.shape {
    border-top: 100px solid blue;
    border-right: 50px solid transparent;
    height: 0;
    width: 100px;
}

修改

如果里面有另一个元素，将会有效。

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

.shape {
    background: blue;
    height: 100px;
    position: relative;
    width: 150px;
  color:white;
}
.shape::before {
    background: blue none repeat scroll 0 0;
    content: "";
    height: 100px;
    position: absolute;
    right: -25px;
    transform: skew(-20deg);
    width: 50px;
}