与三角形的Css边界

Question

如何使用html和css创建这样的div？

  ___________________
 <                   |
  |                  |
  |                  |
  ____________________    

Answer 1

您可以使用div或任何其他元素作为文本框。然后使用:before类，结合透明边框（三面），您可以创建一个箭头。

可以找到更多信息here

＆＃13;

＆＃13;

div {
  position: relative;
  background: lightblue;
  width: 200px;
  height: 100px;
}
div:before {
  position: absolute;
  right: 100%;
  top: 10px;
  content: " ";
  height: 0;
  width: 0;
  border: 10px solid lightblue;
  border-color: transparent lightblue transparent transparent;
}

＆＃13;

<div>Textbox with arrow</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我会告诉你这个奇特的解决方案：

texttext

<强> JSFiddle