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

Question

这是我想要的结果:

我正在使用以下边框:

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

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

Answer 1

这很简单.只需使用以下css:

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

<div class="shape">
 <span>Hello</span> 
 <div> Test message </div>
</div>