三角形Css边框

Question

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

  ___________________
 <                   |
  |                  |
  |                  |
  ____________________    

Answer 1

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

更多信息可以在这里找到

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

<div>Textbox with arrow</div>

Answer 2

我将向您展示一个奇特的解决方案:

.box{
    position: relative;
    height: 400px;
    width: 500px;
    background-color: #ccc;
    border: 2px solid orange;
    margin: 50px 0 0 50px;
}
.box::after{
    content: " ";
    width: 20px;
    height: 20px;
    position: absolute;
    top: 10px;
    left: -12px;
    border-top: 2px solid #FFA500;
    border-left: 2px solid #FFA500;
    z-index: 1000;
    background: linear-gradient(-45deg, rgba(255,255,255,0) 12px, #CCC 12px);
    transform: rotate(-45deg);
}

JSFiddle