矩形下的CSS三角形

Question

这就是我想要的.目前我只有一个里面有文字的矩形.不知道如何在它下面创建这个矩形.

码:

.txt_First {
    font-size:0.8em;
    text-align: justify;
    padding-bottom:20px;
}
.com_box {
    width:60px;
    height: 50px;
    background: black;
    color:white;
    float:left;
    display: flex;
    justify-content: center; /* align horizontal */
    align-items: center; /* align vertical */
    margin-right:8px;
    margin-bottom: 5px;
    margin-top:1px;
}

HTML:

<div class="com_box">71</div>
      <div class="txt_First">
      Lorem Ipsum is simply dummy text of the printing and typesetting    industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      </div>

这是jsfiddle:http://jsfiddle.net/wrm4y8k6/

Answer 1

这对你有用吗？

.txt_First {
        font-size:0.8em;
        text-align: justify;
        padding-bottom:20px;
    }
    .com_box {
        width:60px;
        height: 50px;
        background: black;
        color:white;
        float:left;
        display: flex;
        justify-content: center; /* align horizontal */
        align-items: center; /* align vertical */
        margin-right:8px;
        margin-bottom: 5px;
        margin-top:1px;
        position: relative;
    }
.com_box:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 0 0;
  border-color: #000 transparent transparent transparent;
}

<div class="com_box">71</div>
      <div class="txt_First">
      Lorem Ipsum is simply dummy text of the printing and typesetting    industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      </div>