CSS能做出一个这样一体的样式吗？

Question

我想到是做一个三角形和一个矩形拼接起来 那么这个能不能直接用一个元素做出来？

Answer 1

.teac{
    margin-left: 100px;
    max-width: 100px;
    height: 50px;
    padding: 10px 15px;
    border-radius: 4px;
    position: relative;
    box-shadow:0 6px 10px 2px #ccc;
    background: #FFFFFF;
  }
  .teac i{
    position: absolute;
    left: -5px;
    top: 10px;
    width: 10px;
    height: 10px;
    background: #FFF;
    transform: rotate(45deg);
  }

<div class="teac"><i></i></div>
这样的嘛

Answer 2

用css伪类可以一个dom元素实现