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請你，也可以調整顏色等

這基本上是地方在你的角落三角形使其出現削減。