矩形下的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>

Answer 2

像这样：

.square {
  width: 100px;
  height: 100px;
  background: #000000;
}
.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 20px 0 0;
  border-color: #000000 transparent transparent transparent;
  margin-left: 20px;
}

<div class="square"></div>
<div class="triangle"></div>

Answer 3

只需添加此

即可

.com_box::after{
  content: '';
  position: absolute;
  left: 40%;
  top: 100%;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid black;
  clear: both;
}

并将.com_box添加到position:relative

Example

Answer 4

参见示例：fiddle

HTML：

<div id="triangle-down"></div>

CSS：

#triangle-down {
 width: 0;
 height: 0;
 margin-left:20px;
 border-left: 0px solid transparent;
 border-right: 10px solid transparent;
 border-top: 15px solid black;
}