一旦我用CSS创建一个形状，我怎样才能使用它的中心作为另一个CSS形状的焦点？

我想创建一个圆形和一个正方形。我希望广场的焦点成为这个圈子的焦点。这样，当我将形状变大或变小时，位置仍然是我想要的位置。如何才能做到这一点？一旦我用CSS创建一个形状，我怎样才能使用它的中心作为另一个CSS形状的焦点？

基本上作为一个学习工具，下面的图像是我想只使用HTML和CSS重新创建。但对于我的问题，请只关注外圈和外圈。

来源

2015-12-02 Lefty

将两个形状改变大小？我的意思是广场和圈子的规模？ – Asynchronous

最佳方法是SVG。否则，你的目标* divitis *只是为了创造更好的图像。 –

你能解释一下你的意思吗？请注意 –

，你可以用translate和transform-origin混合做到这一点。

基本上居中在容器中的元素与：

position:absolute; 
    top:50%; 
    left:50%; 
    transform: translateX(-50%) translateY(-50%);

和方不会居中，如果是逆时针旋转45度，你改变了由来以：

transform-origin: 85% -35%;

你有一个在这个例子中JSFIDDLE（将鼠标悬停在元素上检查它们是否缩小和扩大

来源

2015-12-02 09:31:05

看起来我们没有以同样的方式理解问题... –

是的..我在阅读你的答案后也一样。我现在不知道他在找什么:) –

您可以使用一个div与伪元素。这两个元件将根据视口的宽度调整大小一起：

.circ{ 
 
    position:relative; 
 
    width:30%; 
 
    padding-bottom:30%; 
 
    border:1px solid #333; 
 
    border-radius:50%; 
 
    margin:0 auto; 
 
} 
 
.circ:after{ 
 
    content:''; 
 
    position:absolute; 
 
    top:7.5%; left:7.5%; 
 
    width:85%; height:85%; 
 
    border:1px solid #333; 
 
    transform:rotate(45deg); 
 
}

<div class="circ"></div>

来源

2015-12-02 09:32:25

一旦我用CSS创建一个形状，我怎样才能使用它的中心作为另一个CSS形状的焦点？

回答

相关问题