CSSでベベルを使うと表示が少しおかしくなる

以下のソースで角の右下だけ斜めにしたい（ベベル）のですが、どうしたらいいでしょうか？
それから、このソースだと真ん中に白い三角がついてしまいます。
白い三角を無くすにはどうしたらいいでしょうか？

ネットでベベルについて調べているのですが中々情報がなく、あっても
詳しく解説されてないでソースだけ載っているので、もしお時間があれば
詳細に教えて頂けると幸いです。

<html> ```ここに言語を入力 <html> <body> <div class="test"> </div> </body> </html> ``` <CSS> ```ここに言語を入力 .test { width:200px; height:200px; background: linear-gradient(45deg, transparent 10px, #0099ff 10px), linear-gradient(135deg, transparent 10px, #0099ff 10px), linear-gradient(225deg, transparent 10px, #0099ff 10px), linear-gradient(315deg, transparent 10px, #0099ff 10px); background-position: bottom left, bottom right, top right, top left; background-size: 50% 50%; background-repeat: no-repeat; } ```

行動規範の内容に同意します

回答1件

ベストアンサー

単純に右下にベベルをつけるのであれば、次のCSSで可能です。

css
1.test {
2width:200px;
3height:200px;
4background:
5linear-gradient(315deg, transparent 10px, #0099ff 10px);
6background-position: bottom left, bottom right, top right, top left;
7background-repeat: no-repeat;
8}