CSSの透明な右上三角形の枠線

Question

私はブロック（div）をラインエアの勾配で持っています。 三角形を切り取るために右上の角を作ることは可能ですか？

たとえば、角が丸いブロックを作成するために、ボーダー半径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 
} 

はあなたの要素のサイズにピクセルサイズをベースにすることができます。