1
我想在CSS3中创建自定义形状,但是我在某些屏幕分辨率下对象的位置有问题。CSS3 shape not postioning correctly
我所试图做:
CSS:
.foobar {
position: relative;
width: 100px;
background-color: #666733;
color: #ffffff;
border: none;
padding: 5px 0;
margin-left: 10px;
margin-bottom: 5px;
}
.foobar:before {
content: "";
position: absolute;
width: 110px;
height: 22px;
background: #666733;
padding-left: 0;
margin-left: -32px;
-moz-border-radius: 100px/50px;
-webkit-border-radius: 100px/50px;
border-radius: 100px/50px;
z-index: -100;
}
我遇到的问题是与foobar:before
在不同的屏幕分辨率看起来关:
iPhone:
的iPad:
桌面:
我怎样才能正确地与CSS代码的形状,使其与所有工作屏幕尺寸?我试图创建@media
,并调整了margin-left
,但我很想知道是否有更好的方法?
由于它的工作! +1的帮助。 –