cssリボン作成がうまくいかない

Question

webサイト作成にあたり画像のようなカテゴリのリボンの作成をしていますが、リボン右側の三角形に欠けている部分を透明にしたいのですが表現できません。

以下のソースコードをどのようにすれば透明にすることができるのでしょうか？
教えていただけると幸いです。

<div class="category">
	カテゴリ
</div>

.category {
	display: inline-block;
	position: absolute;
	top: 5px;
	left: -10px;
	width: 70px;
	height: 22px;
	line-height: 22px;
	text-align: center;
	background: black;/*背景色*/
	color: white;/*文字色*/
	box-sizing: border-box;

	&::after {
		position: absolute;
		content: '';
		width: 0px;
		height: 0px;
		z-index: 1;

		/*右端の山形*/
		top: 0;
		right: 0;
		border-width: 11px 5.5px 11px 0px;
		border-color: transparent #fff  transparent transparent;
		border-style: solid;
	}
}

Answer 1

下記でどうでしょう。

    &::after {
      position: absolute;
      content: '';
      width: 0px;
      height: 0px;
      z-index: 1;

      /*右端の山形*/
      top: 0;
      right: -5.5px;    //修正
      border-width: 11px 5.5px 11px 0px;
      border-color: black transparent black black;  //修正
      border-style: solid;
    }

別案

clip-path で切り抜く

  .category {
    display: inline-block;
    position: absolute;
    top: 5px;
    left: -10px;
    width: 70px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    background: black;/*背景色*/
    color: white;/*文字色*/
    box-sizing: border-box;
    padding-right: 5px;
    clip-path: polygon(0% 0%, 100% 0, 65px 50%, 100% 100%, 0% 100%);
  }

Comments

[AN3000]

早々の回答ありがとうございます！無事、改善できました。
なるほど。指定する順番でしたか。理解しました！