CSS透明右上角三角形边框答案

【问题标题】：CSS transparant top right triangle borderCSS透明右上角三角形边框
【发布时间】：2017-08-11 19:51:16
【问题描述】：

我有一个带有线性渐变的块（div）。可以把右上角剪成三角形吗？

例如，您有 5px 的边框半径来制作圆角块。但是有没有可能有一个透明的右上角40px？

感谢阅读

【问题讨论】：

你的 div 在哪里？分享一些代码
不确定你在问什么。请详细说明并提供代码

标签： css

【解决方案1】：

对不起是这样的： https://www.w3schools.com/cssref/playit.asp?filename=playcss_border-top-right-radius&preval=100px

不仅不是圆形，而是像三角形一样的尖角。（直线）

<div class="top-block">content</div>

.top-block {
    background: lineair-gradient(from top to right, red, blue);
    border-top-right-radius: 100px;
}

【讨论】：

【解决方案2】：

你可以像这样使用 ::after / :: before 元素来实现效果。

.yourelement{
    position:relative; // Required.
}
.yourelement::after {
    content: "";
    position: absolute;
    border-left: 40px solid transparent; 
    border-top: 40px solid #fff; // YOUR BG COLOR
    top: 0px;
    right:0px
}

您可以根据您的元素大小随意调整像素大小，还可以调整颜色等。

这实质上是在你的角落上放置一个三角形，使其看起来被切割。

【讨论】：