Question

当你将鼠标悬停在div

上时，我试图在屏幕的上角设置一个圆圈

我想我会做一个计算，考虑到圆的高度和宽度是200px，我在顶部和侧面添加了100px到100％的屏幕，所以它会将它推到屏幕边缘100px。

这是位置变化的圆圈的css

    #circle{
    border-radius: 50%;
    width: 200px;
    height: 200px; 
    background-color:blue;

    position: absolute;
        right: calc(100% + 100px);
        top: calc(100% + 100px);
    }

问题是什么都没有显示

我不确定这只是一个css限制，或者为什么它不会显示问题，因为我希望它存在并且有响应

如果有更好的方法可以获得相同的效果，请告诉我

谢谢

Answer 1

将top设置为0，将左侧设置为0并使用CSS transform translate属性：

＆＃13;

  #circle {
    border-radius: 50%;
    width: 200px;
    height: 200px;
    background-color: blue;
    position: absolute;
    left: 0;
    top: 0;
    transform:translate(-50%,-50%);
  }

＆＃13;

<div id="circle"></div>

＆＃13;

Answer 2

right: calc(100% + 100px);
top: calc(100% + 100px);

使用此方法，您可以将圆圈从顶部放置100％+ 100 px，从右侧放置100％+ 100 px。将圆圈放置在距离左下角100px的位置。如果你想要它在右上角你必须将顶部和右边设置为0，如果你想要它在左上角，你将删除right: 0;并放置left: 0;

Answer 3

另一种方法是根本不打扰调整位置，为什么不将边界半径应用到元素的一个角落？

calc和translateX / Y很棒，但为什么过于复杂？

＆＃13;

.circle {
  position: absolute;
  top: 0;
  right: 0;
  height: 100px;
  width: 100px;
  background: #f90;
  border-radius: 0 0 0 100%;
}

＆＃13;

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

＆＃13;

Css，增加到100％[calc（100％+ __）]

3 个答案: