CSS 实用小技巧 画三角、梯形、月牙

绘制图形

绘制三角形 标示

div {
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-left-color: red;
}

同理可制作直角三角形

绘制 梯形

.div {
   height: 0;
   width: 50px;
   border-bottom: 25px solid #66FFCC;
   border-left: 25px solid transparent;
   border-right: 25px solid transparent;
}

绘制平行四边形

transform: skew(25deg) 

绘制月牙

利用圆形图形的 box-shadow

更复杂图形

可用 canvas 或 svg 绘制

实用需求

单行文本隐藏

{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

转化为可编辑

contentenditable="true"

只响应input事件

在系列词汇间 增加 逗号等分割符

.item+.item:before {
  content: ','
}

其他

边框的另两种实现方式

用 box-shadow 做边框
用 outline

简单的鼠标事件阻止

pointer-events: none

鼠标事件“穿透”该元素 并且 指定该元素“下面”的任何东西