如何在 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>

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

How to make a right angled triangular cut on a div?

css

css-shapes