1

如何通过 css3 创建像图片一样的按钮？

在此处输入图像描述

我试过下面的代码。

<style type="text/css">
    .left,
    .right{
        float:left;
  border-style:solid;  
  width:0px;
  height:0px;
    }
    .left{
        border-color: red green red green;
        border-width:15px 0px 15px 75px;
    }
    .right{
  border-color: green green green red;
  border-width:15px 20px 15px 35px;
    }  
</style>
<div>
    <div class="left"></div>
    <div class="right"></div>
</div>

但得到了这样的输出：

在此处输入图像描述

创建按钮的弯曲边框和两个按钮之间的细曲线的确切方法是什么？

-谢谢。

编辑：根据你的回答，我做了这个：

<style type="text/css">    
    .left,
    .middle,
    .right{
        height:30px;         
        display:block;
        float:left;
        text-decoration:none;
        position: relative;
        text-align:center;
        color:black;        
    }
    .left,
    .right{
        padding:0px 10px;
        line-height: 30px;
    }   
    .left{
        background-color:red;
        width:60px;
        border-bottom-left-radius: 17px;
        border-top-left-radius: 17px;
    }
    .middle{
        background-color:#ddd;
        width:2px; 
    }    
    .right{
        background-color:green;
        width:40px;
        border-bottom-right-radius: 17px;
        border-top-right-radius: 17px;        
    }
    .middle::before{
        content: "";
        position: absolute;
        top: 5px; 
        margin-top: -5px;
        border-width: 15px;
        border-style: solid;
        border-color: #ddd transparent #ddd transparent;
        left: -15px;
    } 
    .right::before{
        content: "";
        position: absolute;
        top: 5px; 
        margin-top: -5px;
        border-width: 15px;
        border-style: solid;
        border-color: green transparent green transparent;
        left: -15px;
    }
    .left:hover{
        background-color:blue;
    }
    .right:hover{
        background-color:orange;
    }
    .right:hover::before{
        border-color: orange transparent orange transparent;
    }
</style>

<a href="javascript:void();" class="left">play</a>
<a href="javascript:void();" class="middle"></a>
<a href="javascript:void();" class="right">pause</a>

输出：

在此处输入图像描述

标准网站可以吗？

4

2 回答 2

2

干得好：-

<style type="text/css">
    .left,.right,a{
        float:left;
        border-style:solid;  
        width:0px;
        height:0px;
        border-radius: 3px;
    }
    .left{
        border-color: 0A0D6A;
        border-width:10px 0px 10px 30px;
    }
    .right{
        border-color: 6568B9 6568B9 6568B9 0A0D6A;
        border-width:10px 30px 10px 8px;
        margin-left:-3px;
    }  
</style>
<div>
    <div class="left"></div>
    <div class="right"></div>
</div>

用纯 css 在蓝调之间创建白色边界是很棘手的。“扬声器”和“播放”图标也是如此，但我敢肯定，在未来，CSS4 会让我们所有人更容易做到这一点:)。
同时，简单的图像也能正常工作。
在此处输入图像描述

编辑：-这是获得您要求的“悬停时颜色变化”效果的两种方法：

方法 #1，利用父 div 的 css “悬停选择器”

<style type="text/css">
    .left,.right,a{
        float:left;
        border-style:solid;  
        width:0px;
        height:0px;
        border-radius: 3px;
    }
    .left{
        border-color:#0A0D6A;
        border-width:10px 0px 10px 30px;
    }
    .right{
        border-color:#6568B9 #6568B9 #6568B9 #0A0D6A;
        border-width:10px 30px 10px 8px;
        margin-left:-3px;
    }  
    #top:hover .left{ border-color:#00FF55;cursor:pointer; }
    #top:hover .right{ border-color:#6568B9 #6568B9 #6568B9 #00FF55; }  
</style>
<div id=top>
    <div class="left"></div>
    <div class="right"></div>
</div>

方法 #2 利用 .left 分类 div 的 css“下一个兄弟选择器”

<style type="text/css">
    .left,.right,a{
        float:left;
        border-style:solid;  
        width:0px;
        height:0px;
        border-radius: 3px;
    }
    .left{
        border-color:#0A0D6A;
        border-width:10px 0px 10px 30px;
    }
    .right{
        border-color:#6568B9 #6568B9 #6568B9 #0A0D6A;
        border-width:10px 30px 10px 8px;
        margin-left:-3px;
    }  
    .left:hover { border-color:#00FF55;cursor:pointer; }
    .left:hover +div{ border-color:#6568B9 #6568B9 #6568B9 #00FF55; }  
</style>
<div>
    <div class="left"></div>
    <div class="right"></div>
</div>

检查它们是否都适用于 iexplore < 9

于 2013-05-26T06:00:02.253 回答
2

实际上最好的解决方案是............按钮是三个图像......如果你想分别使用按钮的两个部分。

第一个- 左侧按钮

2nd - 你看到过渡的路口

第三- 右侧部分。

您也可以使用color和image。

第一个- 左侧按钮color

2nd - 你看到过渡的路口image

3rd - 右侧按钮color。

这是大多数网页的方式..

于 2013-05-26T04:06:47.083 回答