CSS transparant右上角三角形边框

Question

我有一个带有lineair梯度的块（div）。 是否有可能使右上角切出三角形？

例如，您可以使用border-radius 5px制作带圆角的块。但有可能有一个透明的40px右上角？

感谢您阅读

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

Answer 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 
} 

您可以根据你的元素的大小尺寸PX请你，也可以调整颜色等

这基本上是地方在你的角落三角形使其出现削减。