右下角带有直角三角形的按钮的 CSS [关闭]答案

【问题标题】：CSS for button with right triangle at lower right [closed]右下角带有直角三角形的按钮的 CSS [关闭]
【发布时间】：2018-05-06 00:45:57
【问题描述】：

希望设计这个组件。

谁能给我提供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>

【问题讨论】：

这个问题没有表现出任何努力，甚至没有考虑到背景颜色/结构/图像等相关范围。
Can someone provide me with css to create the above component 这不是一个代码制作网站。你应该至少展示你为实现这一目标所做的努力
一个简单的谷歌搜索，你会得到它
我在 css 方面非常基础，无论如何感谢你们 cmets，我会尝试一些实现并回来。
这里有一些不错的sn-ps css-tricks.com/examples/ShapesOfCSS

标签： css sass

【解决方案1】：

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

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;
}

&lt;div class="informational"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

你可以使用

内容：'';和 box-sizing:border-box;显示：内联块；显示这个。

请看这里

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

.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;}

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

谢谢。

【讨论】：

看起来这会有所帮助，但你认为最好的做法是什么，用 CSS3 写这个更好吗？另外我不想显示黑色，我怎样才能让它透明？