选择 class 包括 bottom 的 .beak 的元素，设置其 width 比 .beak.top 的少 4%， 使它距父元素顶部比 .beak.top 少 5%， 距父元素左侧比 .beak.top 多 2%

在CSS中，你可以使用伪类`:before`和`:after`配合计算单位（如百分比）来实现这样的效果。假设有一个类名为`.beak`，其中包含`.beak.top`和`.beak.bottom`两个部分，你想调整`.beak.bottom`的宽度，并使其相对于`.beak.top`的位置有所偏移，可以这样做：

.beak {
  position: relative; /* 假设需要绝对或相对定位 */
}

/* 设置.top元素的基本样式 */
.beak.top {
  /* ... */
}

/* 对.bottom元素进行样式设置 */
.beak.bottom {
  width: calc(100% - (4% * var(--beak-top-width))); /* width减少4% */
  
  /* 计算距离父元素顶部的距离 */
  top: calc(5% * var(--beak-top-height));
  
  /* 计算距离父元素左侧的距离 */
  left: calc((100% + 2%) * var(--beak-top-width)); /* 左侧多2% */
  
  /* 添加必要的伪元素来创建元素 */
  content: '';
  position: absolute;
}

这里假设`.beak.top`有一些固定的宽高值(`var(--beak-top-width)`和`var(--beak-top-height)`)，你需要先为它们设置变量并应用到`.beak.bottom`上。

注意，这个例子依赖于CSS变量(`var()`)和现代浏览器对CSS计算单位的支持。如果在某些老版本的浏览器中使用，可能需要添加一些浏览器前缀或者使用JavaScript库来处理计算单位。同时，实际操作前请确保你的HTML结构支持这样的选择器和样式设置。