箭头按钮上的圆角

我试图让这个按钮变为纯CSS。我可以使用精灵，但它不能控制悬停状态并确定我想要的大小。至少我可以让边缘变硬。箭头按钮上的圆角

但是，我宁愿保持边缘圆润，我真的很难做到这一点。我发现这个codepen有一个类似于我想要的按钮，无论什么原因，我甚至无法将这个复制作为链接元素。 http://codepen.io/anon/pen/eyCrK

这里的设计：http://f.cl.ly/items/1S0b011p1c1J1Y2J2c2x/Screen%20Shot%202014-02-20%20at%2011.17.41%20AM.png

谁能帮助我吗？后/前边界的工作方式对我来说相当混乱，并且让角落变圆是超出我的知识的。任何帮助，将不胜感激。

2014-02-20 Ryan

这个例子没有一个准确的角落，但请看看。

我在::添加了伪元素之后的2个属性。

#breadcrumbs-two a::before{ 
    content: ""; 
    position: absolute; 
    top: 50%; 
    margin-top: -1.5em; 
    border-width: 1.5em 0 1.5em 1em; 
    border-style: solid; 
border-color: #ddd #ddd #ddd transparent; 
    border-top-left-radius:16px; /*new property add*/ 
    border-bottom-left-radius:16px; /*new property add*/ 
    left:-1em; 
}

这是Demo link！

来源

2014-02-21 05:52:26

不知道人们为什么删除自己的岗位上，但它能够帮我找出使用SVG +掩盖得到什么我是后的解决方案： http://f.cl.ly/items/1V403r09460s0P420w07/arrow-button.html

我创建了图像掩模之前和之后，这允许我保持宽度流体，并通过转换来改变悬停颜色。

<style> 
    a.arrow { 
    background: #015880; 
    color: white; 
    display: -moz-inline-stack; 
    display: inline-block; 
    vertical-align: middle; 
    *vertical-align: auto; 
    zoom: 1; 
    *display: inline; 
    position: relative; 
    line-height: 70px; 
    padding: 0 20px; 
    height: 70px; 
    -webkit-transition: all 0.3s ease-in-out; 
    -moz-transition: all 0.3s ease-in-out; 
    -o-transition: all 0.3s ease-in-out; 
    transition: all 0.3s ease-in-out; 
    text-decoration: none; 
    text-transform: uppercase; } 

    a.arrow:hover { 
    background: #0d6e9b; 
    padding: 0 40px 0 30px; } 

    a.arrow:hover:before, a.arrow:hover:after { 
    background: #0d6e9b; } 

    a.arrow:before, a.arrow:after { 
    background: #015880; 
    content: ''; 
    -webkit-transition: all 0.3s ease-in-out; 
    -moz-transition: all 0.3s ease-in-out; 
    -o-transition: all 0.3s ease-in-out; 
    transition: all 0.3s ease-in-out; 
    height: 70px; 
    position: absolute; 
    top: 0; } 

    a.arrow:before { 
    mask: url("http://f.cl.ly/items/123R0o2q2V0y1b393R1t/button-left.svg"); 
    -webkit-mask-image: url("http://f.cl.ly/items/123R0o2q2V0y1b393R1t/button-left.svg"); 
    width: 21px; 
    left: -21px; } 

    a.arrow:after { 
    mask: url("http://f.cl.ly/items/343c47433k213o3a091O/button-right.svg"); 
    -webkit-mask-image: url("http://f.cl.ly/items/343c47433k213o3a091O/button-right.svg"); 
    width: 25px; 
    right: -25px; } 
</style> 

<a href="" title="Join the Club" class="arrow">Join the Club</a>

来源

2014-02-21 19:17:57 Ryan

箭头按钮上的圆角

回答

相关问题