CSS是现代Web开发中非常重要的一种技术，可以让我们在网页中实现各种想象中的效果。其中绘制缺角的矩形就是CSS技术的一个很好的例子。

.box {
  width: 100px;
  height: 50px;
  border: 1px solid #000;
  position: relative; /*相对定位*/
  overflow: hidden; /*超出部分隐藏*/
}
.box:before {
  content: '';
  position: absolute; /*绝对定位*/
  top: -10px;
  left: -10px;
  width: 0;
  height: 0;
  border-top: 10px solid #000;
  border-left: 10px solid transparent;
}
.box:after {
  content: '';
  position: absolute;
  bottom: -10px;
  right: -10px;
  width: 0;
  height: 0;
  border-bottom: 10px solid #000;
  border-right: 10px solid transparent;
}

我们首先创建一个box元素，并设置它的高度、宽度和边框样式。接着，我们设置了相对定位并隐藏超出部分。接下来，我们用:before和:after伪元素分别绘制出矩形的左上角和右下角的缺角部分。

在分别设定:before和:after伪元素时，我们设置它们的位置为绝对定位，并且用border来定义缺角的样式，同时通过透明背景实现三角形的效果。

通过这样的CSS技术，我们可以轻松地实现各种形状的图形，实现网页美观实用的效果。