css - 如何正确设置 transform-origin 以创建完美的 X 符号？

Question

我正在尝试为关闭按钮 (codepen) 制作一个完美的“X”。我认为我对 transform-origin 的概念或知识有限。我究竟做错了什么？以下是我的代码

.circle {
  width: 100px;
  height: 100px;
  background: black;
  border-radius: 50%;
  position: absolute;
}

span {
  display: block;
  width: 100%;
  height: 5px;
  background: white;
  border-radius: 20%;
  margin-top: 5px;
  position: absolute;
}

span:first-child {
  transform: rotate(45deg);
  transform-origin: center left;
  top: 0%;
  left: 20%;
}

span:last-child {
  transform: rotate(-45deg);
  transform-origin: bottom right;
}

<div class="circle">
  <span></span>
  <span></span>
</div>

Answer 1

不需要 transform-origin 和额外的元素，你可以简单地用一个元素和每行的渐变来完成:

.circle {
  width:50px;
  height:50px;
  border-radius:50%;
  background:
    /*horizontal line centred [width=100% and height=5px]*/
    linear-gradient(#fff,#fff) center/100% 5px,
    /*Vertical line centred [width=5px and height=100%]*/
    linear-gradient(#fff,#fff) center/5px 100%, 
    /*black background color*/
    #000;
  background-repeat:no-repeat;
  transform:rotate(45deg);
}

<div class="circle">
</div>

这是一个透明的版本:

.circle {
  width:50px;
  height:50px;
  border-radius:50%;
  background:
    linear-gradient(#000,#000) top    left,
    linear-gradient(#000,#000) top    right,
    linear-gradient(#000,#000) bottom left,
    linear-gradient(#000,#000) bottom right;
  background-size:calc(50% - 3px) calc(50% - 3px);
  background-repeat:no-repeat;
  transform:rotate(45deg);
}

body {
  background:pink;
}

<div class="circle">
</div>