31

この CSS を使用した三角形 ( JSFiddle ) があります。

.triangle {
    width: 0;
    height: 0;
    border-top: 0;
    border-bottom: 30px solid #666699;
    border-left: 20px solid transparent; 
    border-right: 20px solid transparent;
    }

そして、このHTML：

<div class="triangle"></div>

これで三角形ができますが、対角線はギザギザでピクセル化されています。それらをスムーズにするにはどうすればよいですか？(Safari と Chrome では点線にすることでそれらを滑らかにすることができましたが、Firefox と IE では三角形が壊れてしまいました。)

4

8 に答える 8

54

Firefox の場合、 -moz-transform: scale(.9999); を追加できます。エッジを滑らかにします。あなたの場合：

.triangle {
    width: 0;
    height: 0;
    border-top: 0;
    border-bottom: 30px solid #666699;
    border-left: 20px solid transparent; 
    border-right: 20px solid transparent;
    -moz-transform: scale(.9999);
}

トリックを行います。

于 2014-01-10T08:15:32.803 に答える
29

私はちょうど同じ問題に遭遇し、このトリックを理解しました（少なくとも、それはMacで動作します）：

-webkit-transform: rotate(0.05deg);
-moz-transform: scale(1.1);
-o-transform: rotate(0.05deg); /* Didn't check Opera yet */
transform: rotate(0.05deg);
于 2012-03-30T14:54:22.370 に答える
19

純粋な CSS でも滑らかな対角線を得ることができます。

.triangle {
    width: 0;
    height: 0;
    border-top: 0;
    border-bottom: 30px solid #666699;
    border-left: 20px solid rgba(255, 255, 255, 0); 
    border-right: 20px solid rgba(255, 255, 255, 0);
}

透明にする代わりに、rgba(255, 255, 255, 0) を使用できます。これでまた透明になります。しかし、alpha=0 は滑らかな対角線になります。

rgba css-tricks.com/rgba-browser-supportのブラウザー サポートを確認します。

ありがとう

于 2012-02-03T17:56:43.083 に答える
1

非常にハックな方法は、回転した div を使用することです

ここでは、三角形を表示するために 2 つの div を使用しました。

<div class="triangle">
    <div class="rot"></div>
</div>

三角形の右辺ではない 2 つの内側の div を回転させます。

.triangle{
    position:relative;
    width:100px;
    height:60px;
    border-bottom:1px solid black;
    border-radius:12px;
}
.rot{
    border-radius:10px;
    border-left: 1px solid black;
border-top: 1px solid black;
width:70px; height:70px;
    -webkit-transform:rotate(45deg);
    position:absolute;
    left:15px;
    top:23px;
}

数値間の関係を見つけようとはしませんでした。

コードのフィドルは次のとおりです。

http://jsfiddle.net/mohsen/HTMcF/

canvasしかし、この理由から elementを使用することを強くお勧めします。

于 2011-09-12T23:22:27.653 に答える