Question

因此，大多数手机公司在为手机许可时都会在Android UI上有自己的转折点。我喜欢索尼爱立信为他们的手机创建的UI设计，他们在主屏幕的角落上有四分之一圈。

我希望为我的HTML页面创建类似的按钮。这样我的页面就会在屏幕的四个角上有4个四分之一圆圈。

source: pianetacellulare.it

我确信如果能够理解这个问题就可以轻松解决这个问题，而我却找不到合适的术语来搜索它。本质上我需要使用HTML，CSS和JQuery这样的东西（下面是在Word中创建的图像，4个椭圆是带下拉选项的按钮）：

enter image description here

同样在我们使用它的时候，索尼是否会使用任何术语来定制用户界面（例如，Xperia X8使用Android 2.1，但其主屏幕与HTC手机使用的屏幕不同）。

Answer 1

有很多方法可以解决这个问题。

如果是我，我只会制作四个固定位置并绕过角落的div，如下：

http://jsfiddle.net/KDgLU/2/

div.button {
    display:block;
    position:fixed;
    background-color:blue;
    height:50px; width:50px;
}
#topLeft {
    left:0;
    top:0;
    border-bottom-right-radius:100%;
}
#topRight {
    right:0; top:0;
    border-bottom-left-radius:100%;
}
#botLeft {
    bottom:0;
    left:0;
    border-top-right-radius:100%;
}
#botRight {
    bottom:0;
    right:0;
    border-top-left-radius:100%;
}

请注意，您应该使border-radius更加跨浏览器友好。您可以使用这个小工具轻松完成此操作：http://border-radius.com/

这是你要问的吗？

Answer 2

您可以使用CSS设置它们的样式。以下是对HTML的假设：

<html>
   <body>
     <button id='upper-left-corner'>Messages</button>

现在添加CSS：

<style>
#upper-left-corner {
position:absolute;
text-align:left;
left:0;
top:0;
</style>

非常接近。

创建xperia x8主屏幕等HTML按钮

2 个答案: