1

次のようなメッセージ ツール ヒントを作成しました。 ここに画像の説明を入力

しかし、それはのイメージで構成されています:

ここに画像の説明を入力

右に通常の div があります。(中にテキストあり)

しかし、私は画像でそれをしない方が好きです。回転したdivで三角形の部分を作成したいです。

簡単な div を作成して回転させることで、ここでそれを行うことができました。

   transform: rotate(45deg);
  -ms-transform: rotate(45deg); /* IE 9 */
  -webkit-transform: rotate(45deg); /* Safari and Chrome */

結果は次のとおりです。

ここに画像の説明を入力

ただし（これが私の質問です）-回転した div の右側の部分を削除できますか？

ここに画像の説明を入力

出来ますか ？

ps - 相対/絶対位置の別の div を使用して、div で適切な部分を非表示にできることを知っています。しかし、正しい部分を削除することで解決策があるかどうか知りたいです。(または、三角形を作成するコードはありますか?)。また、角度が 90 度であると仮定します。赤いdivのように。

4

1 に答える 1

3

要素を回転させずにこれを行い、これを位置相対要素内にラップし、位置絶対を使用して正しく設定できます

デモ

.left {
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right:10px solid #001744; 
}
于 2013-05-06T07:53:52.780 に答える