好玩的css小样式，勾、叉、三角、大于号

<div class="content">
	<div class="gou"></div>
	<div class="cha"></div>
	<div class="sanjiao"></div>
	<div class="dayu"></div>
</div>

勾

    .gou {
      height: 30px;
      width: 30px;
      position: relative;
    }
    .gou::before,
    .gou::after {
      content: "";
      width: 2px;
      background-color: red;
      position: absolute;
      left: 8px;
      bottom: 8px;
    }
    .gou::before {
      height: 30px;
      transform-origin: left bottom; /*改变旋转中心点*/
      transform: rotate(45deg);
    }
    .gou::after {
      height: 16px;
      transform-origin: right bottom;
      transform: rotate(-45deg);
    }

叉

    .cha {
      height: 30px;
      width: 30px;
      position: relative; /*定位伪元素 */
    }
    .cha::before,
    .cha::after {
      content: "";
      height: 30px;
      width: 2px;
      display: block;
      background-color: red;
      position: absolute;
      left: 13px;
    }
    .cha::before {
      transform: rotate(45deg); /*旋转角度 */
    }
    .cha::after {
      transform: rotate(-45deg);
    }

在框上方画小三角

    .sanjiao {
      height: 0px;
      width: 0px;
      border-right: 20px solid transparent;  /*利用transparent属性，讲左右边框变为透明*/
      border-left: 20px solid transparent;
      border-bottom: 20px solid red;
    }

画大于号

    .dayu {
      height: 30px;
      width: 30px;
      position: relative;
    }
    .dayu::before,
    .dayu::after {
      content: "";
      height: 16px;
      width: 2px;
      background-color: red;
      position: absolute;
      right: 8px;
      transform-origin: center bottom;
    }
    .dayu::before {
      transform: rotate(-60deg);
    }
    .dayu::after {
      transform: rotate(-120deg);
    }