html - 我想像图片中提到的那样对 div 进行切割

Question

我想像下图那样在 div 上进行切割。我已经做了基本的布局，但我不知道如何进行这些削减。

Answer 1

你应该使用

border-corner-shape:bevel;
border-radius: 0% 0% 50% 0%;

但它仍然不能在浏览器上工作。这项技术是为将来准备的。 现在我们应该为这一刻做些什么。这里有一种方法:

https://jsfiddle.net/st2gppxz/1/

div {
    height: 250px;
    width: 200px;
    background: url(address of your image);
    position: relative;
}

div:after {
    content: '';
    position: absolute;
    top: 28%; right: 0;
    border-left: 70px solid transparent;
    border-bottom:180px solid white;
    height: 0;
}