HTML中如何实现箭头围绕指定点而非中心旋转

你可以通过设置transform-origin属性指定旋转原点实现需求，你的箭头起始点在元素最左侧，直接给外层旋转容器设置原点为左上角即可，修改后的代码如下：

/* 原有css样式不需要改动 */
.arrow:after {
  content: "";
  display: inline-block !important;
  width: 0;
  height: 0;
  border-left: 8px solid white;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  vertical-align: middle;
}

.arrow:before {
  width: 75px;
  height: 2px;
  background: white;
  content: "";
  display: inline-block;
  vertical-align: middle;
}

<!-- 仅需给外层div添加transform-origin: left top 即可 -->
<div style="transform: rotate(-60deg); transform-origin: left top;">
  <span class="arrow"></span>
</div>

补充说明 #

• transform-origin的两个参数分别对应水平、垂直方向的原点位置，你可以根据实际需求调整参数值，比如要固定在(10px, 5px)的位置，就写transform-origin: 10px 5px;
• 如果旋转后出现箭头被截断的情况，可以给外层div增加padding或者调整容器尺寸避免内容被裁剪。

内容的提问来源于stack exchange，提问作者beni