5

私はこのような先のとがったボタンを作成しようとしています：

先のとがったボタン

これまでのところ、私はこれを達成することしかできませんでした：

丸いボタン

横の境界線の半径を大きくするとシャープになると思いましたが、それだけで丸みが長くなります。

HTML

<a class="button">Back</a>

CSS

.button {
    display: inline-block;
    height: 3em;
    padding: 0 0.7em 0 1.4em;
    border: 0.1em solid black;
    border-radius: 3em 0.4em 0.4em 3em / 1.5em 0.4em 0.4em 1.5em;
    background: -moz-linear-gradient(
        top,
        #fff,
        #ccc
    );
}
4

3 に答える 3

3

border-radius指定された各コーナーに1/4円の形状を割り当てるため、使用する必要はありません。border-width代わりに、次のサイトに示されているように、特定のプロパティでハックします： http ://www.howtocreate.co.uk/tutorials/css/slopes

しかし、私はあなたが問題を間違った方法で解決していると感じています。あなたがしていることは、背景画像を使用して行うのが最善です。これは、iOSスタイルの戻るボタンがiPhone-for-webスタイルシートに実装される方法です。解像度に依存しないものが必要な場合は、ペナルティなしでSVGを使用できます。

于 2012-12-08T03:27:00.510 に答える
1

アンカータグで包まれた2つの要素を並べて使用すると、このような効果を作成できます。

<style type="text/css">
.arrow-left {
        width:0; 
        height:0; 
        border-top:30px solid transparent;
        border-bottom:30px solid transparent;
        border-right:30px solid orange; 
        float:left;
}
.button {
        float:left;
        height:60px;
        background:orange;
        width:50px;
        line-height:60px;
        font-weight:bold; 
        border-top-right-radius:8px;
        border-bottom-right-radius:8px;
}
</style>

<a href='#'><div class="arrow-left"></div><div class="button">Back</div></a>

それが最も洗練されたソリューションであるかどうかはわかりませんが、コンセプトアートと同じように見え、意図したとおりに機能します。

于 2012-12-08T03:35:54.387 に答える
1

よく考えてみると、これはより効果的なスタイリングと1つのHTML要素の使用を可能にするよりエレガントなソリューションです。この方法を使用して、私たちはあなたのコンセプトの結果を完全に達成することができます。

HTML

<a href="#" class="button">Back</a>

CSS

a.button {
    text-decoration:none;
    color:#111;
    text-shadow:0 1px 0 #fff;
    font-weight:bold;
    padding:10px 10px;
    font-size:14px;
    border-radius:0 8px 8px 0;
    -webkit-border-radius:0 8px 8px 0;
    float:left;
    margin-left:30px;
    margin-top:20px;
    position:relative;
    font-family:verdana;
    color:#3b3d3c;
    border:1px solid #666;
    border-left:0;
    background: -moz-linear-gradient( top , #eee 0%,#bbb 100%);
    background: -webkit-linear-gradient( top , #eee 0%,#bbb 100%);  
}
a.button:after {
    content:"";
     width:25px;
     height:25px;
     background: -moz-linear-gradient( left top , #eee 0%,#bbb 100%);
     background: -webkit-linear-gradient( left top , #eee 0%,#bbb 100%);
     -moz-transform: rotate(45deg);
     -webkit-transform: rotate(45deg);
     display:block;
     position:absolute;
     top:5px;
     left:-14px;
     z-index:-1;
     border:1px solid  #666;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
a.button:after{
    border-left:0;
    left:-13px;
}

最後のルールはChromeの場合です。それ以外の場合は、結果のレンダリングが少し異なります。

お役に立てれば。

于 2012-12-08T17:04:24.707 に答える