1

たとえば、次のように、角を丸くするのではなく、角をまっすぐに面取りしたボタンを作成する必要があります。

面取りコーナー

これの代わりに：

角丸

box-shadow形状全体の輪郭を描くには 1px の境界線が必要なので、複数の宣言を使用することはできません。また、同じ問題のため、0px x 0px div から矢印トリックを使用できません。etc. を使用-moz-linear-gradientすると、要素の上半分にしか影響しないため機能しません。下までずっと続く角度が必要です。

border-radiusが最も近いですが、デフォルトでは丸められます。CSS や JavaScript でこの効果を達成することは可能ですか?

4

4 に答える 4

0

私はこの答えの功績を認めることはできませんが、これに対する解決策を持っている人を見つけました。このフィドルをチェックしてください。

次のように機能します。

HTML:

<div id="box3">
Content Here  
<div id="box3bottom"></div>
</div>

CSS:

    p {
    margin: 10px;
}

#box1, #box2, #box3 {
    background-color: #207cca;
    border: 1px solid black;
    color: white;
    height: 200px;
    margin: 20px auto;
    position: relative;
    text-align: center;
    width: 300px;
}
#box1:before, #box2:before, #box3:before {
    background-color: white;
    border-bottom: 1px solid black;
    content: "";
    height: 20px;
    left: -12px;
    position: absolute;
    top: -8px;
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    width: 30px;
}

#box2:after, #box3:after {
    background-color: white;
    border-bottom: 1px solid black;
    content: "";
    height: 20px;
    position: absolute;
    right: -12px;
    top: -8px;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 30px;
}

#box3bottom {
    height: 100%;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 100%;
}
#box3bottom:before {
    background-color: white;
    border-top: 1px solid black;
    bottom: -8px;
    content: "";
    height: 20px;
    left: -12px;
    position: absolute;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 30px;
}
#box3bottom:after {
    background-color: white;
    border-top: 1px solid black;
    bottom: -8px;
    content: "";
    height: 20px;
    position: absolute;
    right: -12px;
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    width: 30px;
}
于 2013-07-09T22:57:16.953 に答える
0

透明な境界線と境界線の幅を使用してあらゆる種類の三角形を作成できる CSS トリックをいくつか見てきました。これは、探しているものかもしれません。ボタンの端に追加するだけです。 here 別の方法は、画像の背景を持つボタンを作成することです。画像の操作ははるかに簡単です。

編集:どうやら、Triangle Generatorがあり、誰が知っていましたか?

于 2013-07-09T21:16:00.803 に答える
0

メニューをオーバーレイする div で背景画像を使用することになり、最後のタブが選択されたときに最後のタブと div の両方のクラスを JavaScript で変更しました。

これを純粋に CSS で行いたかったのですが、オフセットされた :before および :after 疑似要素の使用は非常に近かったのですが、ピクセル単位で完璧なレイアウトをすべてのブラウザーで機能させるのは非常に困難でした。

好奇心旺盛な人のための私のコードは次のとおりです。

Javascript:

if($('.tabs .tab-right').hasClass('selected')){
    $(".tab .angle").addClass('angle-selected');
}else{
    $(".tab .angle").removeClass('angle-selected');
}

CSS:

.tabs .tab-right {
    padding: 8px 28px 8px 12px;
}
.tabs .angle {
    background: url("../img/angle-noborder.png") no-repeat transparent;
    height: 35px;
    width: 28px;
    display: inline-block;
    position: relative;
    right: 28px;
}
.tabs .angle.angle-selected {
    background: url("../img/angle-border.png") no-repeat transparent;
}
于 2013-07-11T17:52:20.627 に答える