雅虎新闻CSS，如何实现行为

Question

如何使用CSS

实现这一目标

“this”是指倾斜的白色部分。

有什么建议吗？

Answer 1

你需要CSS剪辑。下面的CSS应该会给你带来理想的效果。

-webkit-clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 54%);
 clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 54%);

您可以使用此工具准确计算出您想要的效果。 CSS Clip-path Marker

<强>用法

div {
    width: 280px;
    height: 280px;
    background: #1e90ff;
    -webkit-clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 54%);
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 54%);
     }

Answer 2

您可以使用类似

的内容

transform:  rotate(X deg) scale(1) skew( X deg) translate(0px);

也许你需要3个不同的div，一个用于pic，一个用于旋转，另一个用于放置文本（带有不同的z索引）