右下方右侧三角形按钮的CSS

Question

想要设计这个组件。

有人可以为我提供css来创建上面的组件

宽度应由其包含的文本长度决定。

背景颜色右下角的角色应该是一个右侧三角形，边长为8px。

我正在尝试使用下面的代码，三角形剪切不显示。

.container {
  position: relative;
  display: block;
  width: 120px;
  height: 24px;
  background: blue;
  color:white
}

.container:after{
  position: absolute;
  bottom: 0;
  height: 8px;
  width: 8px;
  border-top: 50px solid transparent;
  border-left: 100px solid red;
  border-bottom: 50px solid transparent;
}

<div class="container">
  Informational
</div>

Answer 1

根据您的要求更改颜色，高度和宽度。

＆＃13;

＆＃13;

div {
  height: 300px;
  background: red;
  position: relative;
}

div:before {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  border-bottom: 80px solid white;
  border-left: 80px solid red;
  width: 0;
}

＆＃13;

<div class="informational"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用

内容：＆＃39;＆＃39 ;;和盒子大小：边框;显示：内联块;显示这个。

请在此处查看

[https://jsfiddle.net/techran/bpu9zwer/]

＆＃13;

＆＃13;

.container {
background: #169ee9;
position: relative;
box-sizing:border-box;
display:inline-block;
padding:7px 15px;
color:#fff;
}

.container:before {
content: '';
position: absolute;
bottom: 0; right: 0;
border-bottom: 15px solid #000;
border-left: 15px solid transparent;
width: 0;}

＆＃13;

<div class="container">
  Informational
</div>

＆＃13;

＆＃13;

＆＃13;

谢谢。